@easemate/stagger - Feature Demo

1. Linear Stagger - From Start

stagger: { from: 'start', amount: 200 }

1.1 Linear Stagger - From Start (Keyframes)

stagger: { from: 'start', amount: 200 }

2. Linear Stagger - From End

stagger: { from: 'end', amount: 200 }

3. Linear Stagger - From Center

stagger: { from: 'center', amount: 300 }

4. Linear Stagger - From Edges

stagger: { from: 'edges', amount: 300 }

5. Grid Stagger - X Axis

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
stagger: { grid: [4, 4], axis: 'x', amount: 400 }

6. Grid Stagger - Y Axis

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
stagger: { grid: [4, 4], axis: 'y', amount: 400 }

7. Grid Stagger - XY (Radial)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
stagger: { grid: [3, 5], axis: 'xy', amount: 500 }

8. Stagger with Easing Distribution

stagger: { amount: 400, ease: 'easeOut' }

9. Cards with Stagger

🎨Design
âš¡Speed
🎯Focus
✨Magic
🚀Launch
stagger: { from: 'start', amount: 150 }

10. Wave Animation with Jitter

stagger: { amount: 100 }

11. Stagger Presets

1
2
3
4
5
6
7
8
9
Select a preset

Console Output