Spring animation playground
Set a spring’s stiffness, damping and mass and watch what it does: the motion, its position over time, how far it overshoots and how long it takes to settle. Copy the values as a ramin motion API call, share a link to the exact spring, or put it on a headline in the studio. No account needed.
Settles in 0.92 s
- Overshoot
- 5.3% past the target, at 0.31 s
- Damping ratio
- 0.67 (under 1: overshoots)
Preview
Position over time
The shaded area is the overshoot: time spent past the target before the spring comes back to rest.
Copy the motion
The exact ramin motion API call the studio applies: the starter headline’s Y position, from 180 to 40, on this spring. Its duration is not in the call because ramin solves it.
Share these settings
Use it on a headline
Opens the studio on a new, unsaved project with its headline entering on this spring: stiffness 180, damping 18, mass 1, settling in 0.92 s. The headline is selected so its spring is in the inspector. Every value stays editable. No account needed, and nothing you have saved is changed.
Use this spring in raminWhat stiffness, damping and mass change
Stiffness is how hard the spring pulls toward its target. Raise it and the motion gets faster and snappier; any wobble gets quicker, too.
Damping is friction. It takes energy out of the motion, so more damping means fewer and smaller swings past the target. Too little and it rings; too much and it creeps in slowly without ever overshooting.
Mass is how heavy the moving thing is. A heavier mass is slower to start and slower to stop, so it travels further past the target before the spring brings it back.
The three interact through the damping ratio, damping ÷ (2 × √(stiffness × mass)). Below 1 the spring overshoots; at 1 or above it arrives without passing the target.
The playground accepts stiffness 10–1000, damping 1–100 and mass 0.1–10, for springs that come to rest within 5 seconds.
Why the duration is calculated
A spring has no duration setting. It runs until it comes to rest, so its length is a result of the three values rather than a fourth one you pick. ramin simulates the spring at 240 steps a second and calls it settled once it is within 0.1% of the target and has all but stopped. That time is what the playground shows, and it is the length of the track the studio writes, so a spring here and the same spring in a composition last exactly as long.
Worked example: stiffness 180, damping 18, mass 1. The damping ratio is 0.67, so it overshoots by 5.3% and settles in 0.92 s.
The presets
| Preset | Stiffness | Damping | Mass | Overshoot | Settles in |
|---|---|---|---|---|---|
| Smooth | 170 | 26 | 1 | none | 0.96 s |
| Balanced | 180 | 18 | 1 | 5.3% | 0.92 s |
| Bouncy | 180 | 8 | 1 | 37.2% | 1.70 s |
How to use the resulting motion
Use this spring in ramin opens the studio on a new, unsaved project whose headline enters on your spring, with the headline selected so its stiffness, damping and mass are in the inspector, ready to adjust. Save it to an account later if you want to keep it.
Copy snippet gives the same thing as a ramin motion API call, spring('Headline.position.y', …), with your values in it. Copy link gives a URL that reopens this playground on the same spring, so a colleague sees the motion you are talking about.
Springs suit entrances that should feel physical: a product popping in, a card settling, a headline landing. For a fixed-length move, pick a curve from the easing reference instead, or time a sequence with the stagger animation calculator. Timing handed to you in frames converts to seconds in the frames to time calculator.