Ten pieces of real UI, one spring.
Every piece below animates with the spring in the panel. Move a slider, hit replay, feel the difference. The interruption demo is the one that separates springs from easing curves.
A against B.
Pin a spring as A in the panel, keep tuning B, then run both. Same three pieces, two personalities.
A is not pinned yet, so both columns use the current spring.
Take it with you.
The CSS version samples the real spring into a linear() easing, so a plain transition gets the overshoot and the settle. The others carry the physical values across.
Three things worth knowing.
Stiffness pulls toward the target, damping resists motion, mass resists change. Double the stiffness and the mass together and the feel stays the same but the pull is stronger. The ratio is what you feel.
The damping ratio ζ decides the regime. Below 1 the spring overshoots and rings. At exactly 1 it arrives fastest without crossing the line. Above 1 it creeps in. Most UI lives between 0.6 and 1.
An easing curve restarts from zero every time the target changes, which looks like a stutter. A spring keeps its current speed and bends toward the new target. Tap the interruption demo above a few times and watch.