Lesson 5: Coordinated Motion with updateTransition

So far, we’ve animated single properties (scale, color, position, springs).
But real components rarely change just one thing.
They often change several properties at the same time.

Think about a Primary Action Button:

• In Idle → it’s wide, rounded, blue, and shows text.
• In Loading → it shrinks into a pill, turns neutral, and shows a spinner.
• In Success → it expands a bit, turns green, and shows a checkmark.

Animating each property separately would mean juggling multiple states and timings.
That quickly becomes messy.

---

The Concept

updateTransition gives us a state machine for animations.

• You define states (Idle, Loading, Success).
• You describe how each property should animate between those states.
• Compose runs all animations in sync, but allows each property to use its own spec (tween, spring, delay).

This creates coordinated motion:

• The structure (width, corner, background) leads.
• The content (text, spinner, check) follows.
• The entire change feels like one cohesive story.

---

Why it matters

• One state, many animations → keeps code clean.
• Consistency → no drift between properties.
• Scalability → easy to add/remove animated parts.
• Expressiveness → mix confident motion (frame) with playful details (content).

---

Pro Tips

• Use enum class for states (clearer than booleans).
• Lead with structure, follow with details.
• Use springs for micro-interactions (checkmark, icons).
• Use tweens for structure (width, corners, background).
• Add small delays (80–180ms) for staggered effects.

Example here: Lesson 5