Spring Easing
Adjust stiffness, damping and mass and watch the curve settle. The tool reports the damping ratio, how long the spring takes to stop, and how far it overshoots — then exports the shape as linear() for CSS or as physics for a motion library.
Presets
- Damping ratio
- 0.69
- Settles in
- 600ms
- Overshoot
- 5%
Underdamped — overshoots by 5% before settling.
Preview
How hard the spring pulls. Higher is faster and sharper.
Resistance. Raise it until the bounce disappears.
Weight. Higher makes everything slower and heavier.
Output
CSS has no spring function, so the curve is sampled into linear(). Motion libraries take the physics directly.
animation-timing-function: linear(0, 0.0299, 0.1054, 0.2085, 0.3251, 0.4444, 0.559, 0.6638, 0.7559, 0.8339, 0.8977, 0.9479, 0.9859, 1.0133, 1.0316, 1.0425, 1.0478, 1.0488, 1.0467, 1.0427, 1.0374, 1.0316, 1.0258, 1.0203, 1.0153, 1.011, 1.0073, 1.0044, 1.0021, 1.0003, 0.9991, 0.9983, 0.9978, 0.9976, 0.9976, 0.9978, 0.998, 0.9982, 0.9985, 0.9988, 0.9991);
animation-duration: 600ms;Frequently asked
What is the damping ratio and why does it matter?
It is the single number that decides the character of the spring. Below 1 the spring overshoots and bounces back. Exactly 1 is critical damping — the fastest possible arrival with no overshoot at all. Above 1 there is still no bounce, but the spring takes longer than it needs to. If you only watch one value, watch this one.
Why does CSS need linear() instead of a spring function?
CSS has no spring primitive. cubic-bezier cannot express a curve that crosses its target and comes back, which is exactly what a bouncy spring does. linear() gets around this by listing sampled points, so any shape can be described — including one that overshoots several times.
Where does the duration come from?
A spring approaches its target forever in theory, so the tool looks for the moment it gets close enough and stays there. That point becomes the animation duration. Change stiffness or damping and the duration moves with it — this is why springs feel different from fixed-duration easing.
Should I use a spring or a bezier curve?
Springs shine when motion is interruptible or responds to gesture, because the physics stays coherent when the target changes mid-flight. For a simple one-shot transition a bezier curve is easier to reason about and cheaper to describe.
How much overshoot is too much?
As a rule of thumb, anything above about 10% starts drawing attention to itself. That is fine for a confirmation the user should notice, and tiring for a menu that opens forty times a day.