Springs: damping, response

Tune springs by damping and response; bounce only after a flick.

From apple-design, §4, after Designing Fluid Interfaces ↗.

Two numbers, one spring

Drag a slider or pick a preset to replay.

Spring playgroundTweak
Spring progress over 2.5 seconds for the current damping and response 1 0 0 0.5 1.0 1.5 2.0 2.5 s
overshoot 0% · settle 0.42 sstiffness 247 · friction 31.4
const stiffness = (2 * Math.PI / response) ** 2;
const friction = 4 * Math.PI * damping / response;

Menus have no momentum

Open both menus. Nothing threw them.

Bouncy popoverBad
damping 0.6 · response 0.35
Critically dampedGood
damping 1.0 · response 0.35
animate(menu, { opacity: 1, scale: 1 }, { type: "spring", bounce: 0, duration: 0.35 });

Bounce is earned by a flick

Flick each card across, then press Move both.

Bounce everywhereBad
damping 0.6
Bounces only on flicksGood
flick 0.8 · button 1.0
const bounce = Math.abs(releaseVelocity) > 350 ? 0.2 : 0;

Why it matters, pros and cons

Why it matters

A spring aims at a target; new input just moves it. Damping matches the gesture.

Pros

  • Interruptible without seams.
  • Two numbers designers can reason about.
  • Accepts release velocity from a drag.

Cons

  • No fixed duration to sequence against.
  • JS springs run on the main thread.
  • Plain fades need only a short ease-out.