Stagger
MotionMITStaggered children animation primitive for animating lists and grids.
bun add @otfdashkit/ui
Preview
StaggerMotion
Loading Storybook preview…
Code
@otfdashkit/uiimport { Stagger } from '@otfdashkit/ui'
export function Example() {
return (
<Stagger preset="slideUp" staggerDelay={0.08}>
{['Item one', 'Item two', 'Item three', 'Item four', 'Item five'].map((item) => (
<div key={item} className="rounded-md border border-border bg-card px-4 py-3 mb-2 text-foreground">
{item}
</div>
))}
</Stagger>
)
}
Free with the SDK. This pattern ships in @otfdashkit/ui under the MIT license.
Props
Props declared in the Stagger source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | ||
| className | string | ||
| once | boolean | true | |
| preset | 'fadeIn' | 'slideUp' | 'scaleIn' | 'fadeIn' | |
| staggerDelay | number | 0.05 |