Stagger
Stagger-in a container's direct children when it enters the viewport. Useful for cards, lists, grid items.
1
2
3
4
5
6
Usage
import { Stagger } from '@bwo-ui/react';
<Stagger stagger={0.08} from={{ y: 32, opacity: 0 }}>
<Card>...</Card>
<Card>...</Card>
<Card>...</Card>
</Stagger>Props
| Prop | Type | Default | Description |
|---|---|---|---|
itemSelector | string | ':scope > *' | Direct children selector. |
from | { y?, x?, opacity?, scale?, rotate? } | — | Initial state for each child. |
duration | number | 0.8 | Per-item duration. |
stagger | number | 0.08 | Stagger between items. |
ease | string | 'power3.out' | GSAP ease. |
start | string | 'top 85%' | ScrollTrigger start. |
once | boolean | true | Play only once. |