Why springs feel better
Duration-based animation has a fundamental problem: it always takes exactly the same time, regardless of distance or interruption. Springs respond to velocity — tap a toggle mid-flight and it reverses naturally, without awkward restarts.
Tuning spring parameters
Every spring is defined by three values:
- Stiffness — how taut the spring is. Higher = snappier.
- Damping — how quickly the spring settles. Lower = more bounce.
- Mass — how heavy the object feels. Higher = more inertia.
Battle-tested presets
You don't need to hand-tune every spring. These presets cover 90% of UI animation needs. Click each card to see the spring in action on a real notification component.
Interruptibility
The killer feature of springs: they handle interruption gracefully. Click the heart rapidly — the spring preserves velocity and direction, creating a natural "rubber-band" feel. Duration-based animation restarts from scratch every time.
Framer Motion defaults
Framer Motion uses a simpler API: duration and bounce instead of raw stiffness/damping. Apple's recommended defaults:
| Use case | duration | bounce |
|---|---|---|
| Subtle (toggle, checkbox) | 0.25 | 0 |
| Default (modal, dropdown) | 0.4 | 0.15 |
| Playful (notification, like) | 0.5 | 0.25 |
| Bouncy (onboarding, celebration) | 0.6 | 0.4 |
Key takeaways
- Use springs instead of duration for anything interactive — they handle interruption gracefully
- Higher stiffness = snappier, lower damping = more bounce, higher mass = more inertia
- Default preset: duration 0.4, bounce 0.15 — works for most UI
- Springs preserve velocity on interruption — duration-based animation restarts from scratch
- Reserve bouncy springs (bounce > 0.3) for celebrations and onboarding, not everyday UI