Animation
FadeIn
Scroll-triggered fade-in animation wrapper. Wraps any content and animates it from transparent to fully visible as it enters the viewport. Respects prefers-reduced-motion automatically.
Preview
This content fades in on scroll.
Staggered with delay
First item
Second item
Third item
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | — | Content to animate |
delay | number | 0 | Delay before animation starts (seconds) |
duration | number | 0.5 | Animation duration (seconds) |
scrollTrigger | boolean | true | When true, animation fires as the element scrolls into view |
className | string | — | Additional CSS classes applied to the wrapper div |