stagger()
viewmotion
Returns an object of HTML attributes (data-stagger) to apply on a container element.
Direct children with data-motion will receive automatic incremental delays.
Signature
function stagger(options?: StaggerOptions): Record<string, string>;Options
| Property | Type | Default | Description |
|---|---|---|---|
delay | number | 0 | Initial delay before the first child animates (ms) |
step | number | 80 | Delay increment added between each subsequent child (ms) |
Return value
// Returns:
{
"data-stagger": '{"delay":0,"step":80}'
}Usage
---
import { motion, stagger } from "viewmotion";
---
<ul {...stagger({ step: 80 })}>
<li {...motion({ preset: "fade-up" })}>Item 1</li>
<li {...motion({ preset: "fade-up" })}>Item 2</li>
<li {...motion({ preset: "fade-up" })}>Item 3</li>
</ul>