springs.md

Lesson 4: Mastering Springs in Jetpack Compose

Springs are one of the most powerful and natural animation tools in Jetpack Compose.
Unlike fixed-duration animations (tween, keyframes), springs simulate real-world physics.
That’s why they feel alive: a spring always tries to return to equilibrium, overshooting and settling along the way.

---

The Theory of Springs

A spring animation models Hooke’s Law with damping: Force = -k * displacement - c * velocity

• Displacement: how far the object is from the target.
• Velocity: how fast it’s moving.
• k (stiffness): how strong the spring pulls back.
• c (damping): how much friction slows it down.

Together, these create three possible spring behaviors:

1. Overdamped (too much friction): returns slowly, no bounce.
2. Critically damped: fastest return without overshoot.
3. Underdamped (little friction): overshoots and oscillates before settling.

In Compose, you control this with two parameters:

• Stiffness → controls speed & tension.
• Damping ratio → controls how much bounce/overshoot.

This means springs are adaptive:

• A large displacement causes a big swing.
• A small displacement barely moves.
  No need to hand-tune durations — the spring responds naturally.

---

1. Spring Pop (Feedback on Tap)

Concept:
Buttons feel more engaging when they react with a little bounce.
Instead of scaling instantly, we scale with a spring.

Pro Tip 💡
Pair scale with a small rotation. Imperfection makes motion feel human.

---

2. Expandable Card (Stable Container + Playful Content)

Concept:
Not everything should bounce!

• The container expands confidently (no bounce).
• The content inside plays with bouncy springs.

Pro Tip 💡
Mix different spring types in the same component:

• NoBouncy for the container → feels solid.
• LowBouncy for the children → adds delight.

This contrast feels polished and professional.

---

3. Draggable Chip (Elastic Interaction)

Concept:
Dragging + spring = natural closure.
Here, the chip can be dragged across the track, with ghost trails adding personality.
On release, the spring pulls it smoothly back to center.

Why it feels right:

• Drag is direct and predictable.
• Spring closure avoids “stuck” states.
• Ghosts add depth and playfulness.

Pro Tip 💡
Always spring to a resting state.
Leaving elements half-way feels jarring unless it’s a toggle.

---

Pro Tips for Working with Springs

• Damping ratio

  • NoBouncy → stable, professional.
  • LowBouncy → playful, expressive.
  • MediumBouncy → balanced default.

• Stiffness

  • Low → floppy, slow.
  • Medium → default balance.
  • High → snappy, tense.

• Don’t overdo it
  A little bounce = delight. Too much bounce = unpolished.

• Mix stable + playful
  Pair stable containers with bouncy content for cinematic contrast.

---

Why Springs Matter

Springs bring physics-based realism to UI:

• They adapt to distance and velocity.
• They provide a sense of continuity (no sudden stops).
• They make UIs feel alive, especially for interactive gestures.

Next time you reach for tween, ask yourself:
Would a spring feel more natural here?

---

Playground Code

SpringPlayground.kt
Includes:

1. Pop Button — bouncy tap feedback.
2. Expandable Card — stable container + playful content.
3. Draggable Chip — elastic drag with spring return + ghosts.