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
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
| 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 |