Shots in this scene

← scene 08 · JavaScript Animation → scene 10 · Layout Animation and FLIP ▦ the storyboard

SHOT 9.1Intermediate ~19 min · shot 1 of 7

The Spring Model

In one line

A spring pulls toward a target harder the farther away it is, and damping takes energy out. Three numbers (stiffness, damping, mass) and one ratio, the damping ratio, say how it will move.

0/7 · 0%

Think of it like this

Hang a weight on a coil spring, pull it down and let go. It shoots up past its resting place, drops below it, and bobs, each swing smaller, until it hangs still. Nobody drew that path. The spring pulls harder the farther the weight is from home, and the air takes a little energy every swing.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

stiffness (k): How hard the spring pulls per unit of distance. Higher means faster.
damping (c): A brake proportional to speed. It removes energy and stops the bobbing.
mass (m): How hard the object is to accelerate. Higher means slower.
damping ratio (ζ): c ÷ (2√(km)). Below 1 it bounces, 1 is the fastest arrival without a bounce, above 1 it creeps.
overshoot: How far the value passes the target, as a share of the distance travelled.

Step by step

01Feel the three numbers

In the lab set damping to 0 and press Go: the ball never stops. Raise damping until ζ reads 1.00: no overshoot. Double stiffness and read the settle time.

02Run "Three springs, one pull"

Press Pull, pause, set 0.1×. At 244 ms the damping-4 ball is at 258 px of a 160 px journey (161%), damping-12 at 189 px, damping-26 at 132 px.

03Read the console

Before anything moves it prints ζ and the overshoot of each spring. Damping 26 prints ζ 1.00 and 0%.

04Pause at 500 ms

The damping-4 ball is at 100.4 px, heading back from its 258 px peak. Damping-12 is at 155.0 and damping-26 at 158.3. The target is 160.

Try it yourself

1
Quadruple the stiffness only
In "Three springs, one pull" change const k = 170 to 680 and press Pull. The console says ζ 0.08, 0.23 and 0.50, and at 122 ms the damping-4 ball is at 286 px, 79% past the end. Stiffness alone made it bouncier.
2
Tame the third ball
Change the third damping from 26 to 20 (in the list and in the for loop): ζ 0.77, overshoot 2%, the ball at 161.7 px at 500 ms and 160.0 at 1 s. Try 27: the ball never moves (the position is NaN and the browser ignores it), because this formula divides by Math.sqrt(1 - ζ²), which is NaN once ζ reaches 1. The lab and spring.js simulate and have no such limit.

Code & diagrams

Try it: interactive

Spring lab

Move stiffness, damping and mass and watch ζ, the overshoot and the settle time. Press Go, then Interrupt halfway: the spring keeps its speed.

Three springs, one pull

Stiffness 170 and mass 1 for all three, only the damping differs. The position comes from the exact formula for a spring starting at rest, so you can pause and step it like any animation.

Press Run to see the page.

00:00.000

animations

0.00s0.10s0.20s0.30s0.40s0.50s0.60s0.70s0.80s0.90s

Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.

frames

Console

Nothing logged yet.

Expected console output

damping 4: ζ 0.15, overshoot 61%
damping 12: ζ 0.46, overshoot 20%
damping 26: ζ 1.00, overshoot 0%

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Set damping to zero

In "Three springs, one pull" set the third damping to 0 (in the list and in the for loop).

terminal

$ Press Pull and watch the third ball

── what you'll see ──

It swings between 0 and 320 px with no loss (319.99 at 240 ms, 0.05 at 480 ms). This page stops drawing after 3 s, so the ball then freezes where it is (170 px in one run). The formula itself would still give 303.6 px at 19 s. The console says ζ 0.00, overshoot 100%.

Myth vs fact

Myth

More damping always makes a spring smoother.

Fact

Above critical damping it only gets slower: ζ 1 rests after 0.73 s, ζ 2.3 after 2.34 s.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
A spring has the same shape whatever the distance: 10 px or 1000 px, only scaled. That is why one spring token fits every drawer, button and card. Only the ratio k ÷ m matters (the natural frequency is √(k ÷ m)): doubling both changes nothing, which is why design tokens leave mass at 1.

Remember this

1
The problem this solves: a duration and an easing curve describe a path but know nothing about where the thing is or how fast it moves. Interrupt them and they start a new path. A spring describes a rule, so it can be redirected at any moment. Material 3 (Google's design system) moved its motion to physics-based springs with M3 Expressive in 2025; check its motion pages for the current wording.
2
Force toward the target. Hooke's law: the pull is proportional to the distance from the target, twice as far, twice the pull. The constant is the stiffness k. Damping c is a brake that grows with speed and removes energy. Mass m is how hard the object is to speed up. Each tiny time step: acceleration = (-k × distance - c × speed) ÷ m.
3
The damping ratio decides the character. Move the sliders in the lab first. The ratio ζ (zeta) is c ÷ (2 × √(k × m)). Below 1 the spring overshoots and bobs. At exactly 1 it arrives as fast as it can without overshooting (critical damping). Above 1 it creeps. For ζ below 1 the first overshoot is e^(-πζ ÷ √(1-ζ²)) of the distance travelled.
4
Stiffer is faster, not bouncier. Keep ζ at 0.5 and quadruple the stiffness: every time halves (the first peak arrives at 278, 139, 70 and 35 ms, from π ÷ (√(k÷m) × √(1-ζ²))) and the overshoot stays 16%. But change stiffness without damping and ζ changes: with k at 680 the balls of the first example fall to ζ 0.08, 0.23 and 0.50 and bounce far more.
5
Edges. More damping than critical is slower, not smoother: with thresholds of 0.001 and 0.01, damping 26 (ζ 1.00) rests after 0.73 s and damping 60 (ζ 2.3) after 2.34 s (stepping 1 ms at a time). And damping 0 never rests: the ball swings for ever, so every real spring needs a stopping rule (Topic 9.2).

Explain it without notes

What do stiffness, damping and mass do, and what does ζ tell you?

Why do springs handle interruption better than a duration and a curve?

Practice

A spring has stiffness 400 and mass 1. What damping gives critical damping, and what gives ζ 0.7?

A toast spring has k 300, c 20, m 2. What is ζ?

Done when you can

You can say what stiffness, damping and mass change
You can compute ζ and say whether a spring bounces
You can say what damping 0 does