Motion

Physics-based motion that's responsive to input: stiffness sets the speed, damping controls the overshoot. There's no fixed duration — it settles when the physics say so.

Use when

Elements react to drag, release, or a layout change and should feel alive.

Confused with

Tween — both move position, but a spring is input-driven while a tween is time-driven.

Say it precisely“Make it smooth and bouncy.”“Animate to target with a spring, stiffness 180, damping 12 — a little overshoot, then settle.”

Time-based motion from one value to another over a fixed duration and curve. Predictable and choreographed — the timing is the same regardless of how the user got there.

Use when

A transition needs exact, repeatable timing — a slide-in panel, a fade overlay.

Confused with

Spring — both animate the same properties, but a tween ignores input and obeys the clock.

Say it precisely“Animate the panel.”“Tween opacity and translateY over 220ms with ease-in-out; identical every time.”

A sequence where similar items start at small, increasing offsets, so a list feels orchestrated rather than dumped on screen all at once.

Use when

Multiple rows, cards, or menu items enter together and you want rhythm.

Don't use when

The user is waiting on data — don't make loading feel slower.

Say it precisely“Fade in the list nicely.”“Stagger row entrances by 80ms each, capped at ~400ms total; slide up 12px while fading in.”

The curve that shapes acceleration over a tween's duration. ease-out starts fast and settles (good for entrances); ease-in the reverse; linear never accelerates.

Use when

You want to describe how a tween feels, not just how long it takes.

Confused with

Duration — easing is the shape of the motion; duration is its length. You need both.

Say it precisely“Make the timing nicer.”“Use ease-out (cubic-bezier 0, 0, .58, 1) for entrances and ease-in for exits.”

In a spring, the resistance that controls overshoot and settling. Low damping bounces and takes its time; high damping arrives once and stops. It's the dial between playful and precise.

Use when

Tuning a spring's character — bouncy and expressive, or crisp and businesslike.

Confused with

Stiffness — stiffness sets how fast it pulls toward target; damping sets how much it overshoots.

Say it precisely“Less bouncy.”“Keep stiffness 200 but raise damping from 6 to 26 — remove the bounce, settle in one pass.”