lesson-06-staggered_motion.md

Lesson 6 · Staggered Motion in Jetpack Compose

In real apps, elements rarely appear all at once.
Cards, icons, or grid items often enter with a subtle delay cascade — what we call staggered motion.

This effect makes even simple layouts feel intentional and smooth.
And the best part is that you don’t need multiple animations or timers; just one fraction.

---

The Concept

A staggered animation is when each element starts slightly after the previous one.
Think of it as a single timeline that’s phase-shifted per item.

Instead of managing many animations, you:

1. Animate one master fraction t ∈ [0,1]
2. Offset each item’s local time using a phase
3. Clamp it safely within [0,1]
4. Interpolate properties (scale, alpha, etc.) using lerp

Visually, you get a cascading “wave” of motion, simple, elegant, and fully synchronized.

---

💡 Why It Matters

• Adds depth and rhythm to your UI
• Helps users visually group elements
• Feels faster, as our eyes track motion better when it’s staggered
• Works everywhere: grids, lists, onboarding screens, dashboards

---

Implementation

Here’s a compact, reusable example. Tap anywhere to replay the sequence.

Lesson6.kt

---

Pro Tips

• Use a single Animatable(0f..1f) for all items
• Adjust delayPerItem (0.05–0.1) to tune the rhythm
• Combine with lerp for multiple synced properties
• For reverse motion, animate back to 0f instead of restarting
• Keep spacing and colors consistent because rhythm matters as much as motion