Free math tool
Spring Animation Duration Calculator
This spring animation duration calculator tells you how long a spring takes to settle within 1% of its target, plus its damping ratio, overshoot and frequency. Enter stiffness, damping and mass and the numbers update as you drag.
Updated
Physical Input Variables
Calculated Results
// Spring Settling Calculations
// Settling Time: 0.32s
// Damping Ratio (zeta): 0.63
// Natural Frequency: 3.2 HzHow to use the Spring Animation Duration Calculator
- 1
Enter the spring
Set stiffness, damping and mass to the values in your code.
- 2
Read the settling time
This is how long the motion takes to stay within 1% of the target. Use it for timeouts or to sequence the next animation.
- 3
Check the damping ratio
Below 1 bounces, 1 is critically damped, above 1 is slow and never overshoots.
- 4
Adjust
Raise damping to cut overshoot, raise stiffness to make it shorter.
Formats and limits
| Inputs | Stiffness 100–800, damping 10–60, mass 0.5–3 |
|---|---|
| Outputs | Settling time (to 1%), damping ratio, overshoot, natural frequency |
| Method | Solves the damped spring equation and finds the last moment the motion is more than 1% away from rest |
| Cost and sign-up | Free, no account |
Other tools that do this
We make ExodeUI, which publishes this tool. Here is how it compares, and when another tool is the better pick:
| Tool | Pick it for | What to know |
|---|---|---|
| Spring Animation Duration Calculator (this page) | Getting settling time, damping ratio and overshoot for spring values you already have | Free, no account, runs in your browser. |
| Linear easing generator | Getting a duration together with a CSS easing | Its spring example also computes an ideal duration for the curve it outputs. |
Frequently asked questions
How long does a spring animation take?
A spring has no fixed duration. It runs until it settles. This calculator reports the time until it stays within 1% of the target, which is when the motion looks finished.
What is the damping ratio?
The damping ratio is damping divided by 2 times the square root of stiffness times mass. Below 1 the spring overshoots and bounces, exactly 1 reaches the target fastest without overshoot, above 1 it creeps in slowly.
What settling time should UI animations have?
Small controls such as buttons and toggles usually feel right between 0.2 and 0.4 seconds. Larger surfaces such as sheets can take 0.4 to 0.7 seconds.
Why does more mass make a spring slower?
Heavier objects accelerate less for the same force, so with stiffness and damping unchanged the spring moves more slowly and takes longer to settle.