Stagger
Stagger creates cascading animation sequences. Select a pattern to preview.
1
2
3
4
5
0ms100ms200ms300ms400ms
How It Works
Wrap children in a parent with data-anim-stagger. Each child with data-anim gets an increasing delay.
<div data-anim-stagger="100ms">
<div data-anim="fadeInUp">0ms delay</div>
<div data-anim="fadeInUp">100ms delay</div>
<div data-anim="fadeInUp">200ms delay</div>
</div>Patterns
| Pattern | Order | Best for |
|---|---|---|
start | First → Last | Lists, card grids |
end | Last → First | Reverse reveals |
center | Center → Edges | Hero sections |
edges | Edges → Center | Symmetrical layouts |