motion-stagger
Animates slotted children in sequence with a configurable stagger interval. Each child enters with a spring-based fade and lift. Control the stagger
origin with from.
Preview
Item one
Item two
Item three
Item four
Import
Usage
from="center"
Stagger radiates outward from the center item — ideal for symmetric lists and icon grids.
from="last"
Stagger runs from the last item backward — useful for exit animations or right-to-left contexts.
Item one
Item two
Item three
Properties
| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
| | | number | 0.06 | Delay between each child animation in seconds |
| | | number | 0.5 | Spring duration hint in seconds |
| | | number | 16 | Initial vertical offset per child in px |
| | | string | 'first' | 'first', 'last', or 'center' — where the stagger originates |
| | | boolean | true | Animate only on first intersection |
Accessibility
Respects prefers-reduced-motion: when enabled, the stagger reveal is skipped and all children appear at their final state immediately.