How can i animate show/hide scrollbar

[polRk]

<ScrollAreaPrimitive.Scrollbar className="scroll-scrollbar" orientation="vertical">
    <ScrollAreaPrimitive.Thumb className="scroll-thumb" />
</ScrollAreaPrimitive.Scrollbar>

[benoitgrelard]

Hey @polRk,

You can use the data-state (visible or hidden) on the scrollbar to add animations like so:

  '&[data-state="visible"]': {
    animation: `${fadeIn} 300ms ease-out`,
  },
  '&[data-state="hidden"]': {
    animation: `${fadeOut} 300ms ease-out`,
  },

Here's a demo where I've added a fadeIn/fadeOut animation to the basic demo from our website: https://codesandbox.io/s/scrollarea-animated-scrollbar-7eu1y3

[polRk]

Thank you!