The difference is the question it answers
An easing answers 'where is it, at time t?'. A spring answers 'what happens when something with mass gets pushed?'. The spring does not compute a path from A to B — it simulates a mass on a damped spring and lets the motion overshoot, wobble or glide depending on how hard you push and how stiff the system is.
That is why a spring is the right tool for anything that feels physical: drag-and-drop, pull-to-refresh, list reordering, a card you fling away. It is the wrong tool for most entrances — an entrance has no physical cause, so a spring's overshoot reads as indecision.
Mass makes things heavier (higher mass = lazier start, longer tail). Stiffness makes things snappier (higher stiffness = less travel, faster return). Damping makes things stop (low damping = oscillation, high damping = no overshoot at all). You never tune a spring to a duration; you tune it to a feel, and the duration is whatever it ends up being.
Reading the three knobs
- stiffness (or tension): how strongly the spring pulls back. Raise it and motion feels crisp and small; lower it and motion feels loose and floaty. UI springs typically sit high — snappy, not bouncy.
- damping (or friction): how quickly energy leaves the system. Low damping gives the overshoot-wobble that makes physics fun; too low and it reads as rubber, which users read as broken.
- mass: rarely worth touching in UI — it scales the whole response. If motion feels too slow, raise stiffness first; if it feels jittery, raise damping first.
Feeling Fix
-------------------- ----------------------------
too bouncy / rubbery raise damping
too floaty / slow raise stiffness
too stiff / dead lower stiffness slightly
overshoot feels late raise stiffness AND dampingWhen springs earn their keep
The rule of thumb: if a finger caused the motion, consider a spring. Drag a card and release it — a bezier cannot answer 'how fast was it going when I let go?', but a spring can, because you feed it the release velocity. Reorder a list, dismiss a notification with a swipe, snap a sheet open partway — these are physical events with a velocity at the moment of release.
The other honest case for springs is when a fixed duration would feel wrong at multiple sizes: a spring gives the same *feel* across different distances, where a bezier gives the same *time* and therefore different feels.
When to stay on bezier
Entrances and exits are not physical events — nothing pushed the modal, it simply should appear. Give it the settle curve and a duration and be done. Springs there add overshoot to things that should land once, and they make choreographed sequences (hero, then headline, then CTA) nearly impossible to align, because spring timing is a side effect, not a schedule.
Motif's rule: springs for manipulation, beziers for presentation. If a motion does not need to respond to a human hand mid-flight, it does not need physics.