Scroll Animation
A Framer Motion reveal-on-scroll component for React. Animate any content—text, images, videos—with directional (left, right, up, down) and fade-in transitions triggered on entering the viewport.
Installation
npx uilayouts@latest add scroll-animation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | The content to be rendered within the scroll element. | |
| className | string | Optional CSS class for styling the scroll element. | |
| variants | object | Animation variants for different scroll states (hidden/visible). | |
| viewport | object | { amount: 0.5, margin: '0px', once: true } | Settings for when the element is considered in view. |
| delay | number | 0 | Delay before the animation starts, in milliseconds. |
| direction | Direction | 'down' | The scroll direction for the animation (e.g., 'down', 'up'). |