Spring vs. Ease
Springs and easing curves solve different problems. Easing is for a known start and end over a fixed time — a state change the system initiates. Springs are for motion that can be interrupted or that carries energy from a gesture.
Toggle the demo a few times. Then toggle it again mid-flight and watch the difference: the spring absorbs the interruption smoothly, while the eased track has to restart its timeline.
Choosing between them
The wiki's easing-for-state-change and spring-for-interruptible rules draw the line:
| Use a spring | Use easing |
|---|---|
| Gesture-driven (drag, flick) | System-initiated state change |
| Interruptible motion | Fixed start and end |
| Should carry input velocity | Predictable, repeatable timing |
Balanced parameters
The trap with springs is making them too bouncy. spring-params-balanced warns against excessive oscillation — high stiffness with very low damping rings like a bell. The demo uses stiffness: 500, damping: 30, which overshoots just enough to feel alive without wobbling.
const spring = { type: "spring", stiffness: 500, damping: 30 };
const eased = { duration: 0.22, ease: "easeInOut" };Note the eased duration: 220ms. Small state changes belong in the 180–260ms window (duration-small-state), and nothing user-initiated should exceed 300ms.