Chapter III

Motion

Motion words for timing, sequencing, and physical feel. Useful when “smooth” says almost nothing.

01

Spring

Physics-based motion that approaches a target with stiffness and damping. It can feel responsive without being bouncy.

Use whenElements respond to drag, release, or layout change.
Don’t use whenThe motion must be exact, timed, or brand-controlled.

“Make it smooth and bouncy.”
“Use a critically damped spring; no overshoot.”

02

Tween

Time-based interpolation from one value to another using a defined easing curve and duration.

Use whenA transition needs predictable timing and choreographed control.
Confused withSpring, because both animate position or opacity.

“Animate the panel.”
“Tween opacity and translateY over 180ms with ease-out-quart.”

03

Stagger

A sequence where similar items start at small offsets, usually to make a list feel orchestrated.

Use whenMultiple rows, cards, or menu items enter together.
Don’t use whenThe user is waiting for data. Don’t make loading slower.

“Fade in the list nicely.”
“Stagger row entrances by 35ms, capped at 180ms total delay.”