motion

Motion explains — where things came from, that an action landed, where to look next. If an animation explains nothing, cut it.

Should it animate at all?

Frequency decides. Something seen 100+ times a day (keyboard shortcuts, command palette) gets no animation — animation makes repeated actions feel slow. Tens of times a day (hover, list navigation): minimal or none. Occasional (modals, drawers, toasts): standard. Rare or first-time (onboarding, celebrations): can add delight. Never animate keyboard-initiated actions.

Match motion to the component's personality: playful things can bounce a little; a professional dashboard is crisp and fast.

Defaults

• Duration: 100–160ms button feedback, 125–200ms tooltips, 150–250ms dropdowns, 200–400ms modals/drawers. UI stays under 300ms wherever possible — a 180ms dropdown feels more responsive than a 400ms one, and easing amplifies it.
• Easing: ease-out for enters and exits (responsive — movement starts immediately), ease-in-out for on-screen moves/morphs, plain ease for hover/color, linear only for continuous motion (spinners, marquees). Never ease-in for UI — it delays the start, the exact moment the user is watching.
• Custom curves beat built-ins — the CSS defaults are weak. Good staples: cubic-bezier(0.23, 1, 0.32, 1) (strong ease-out), cubic-bezier(0.77, 0, 0.175, 1) (strong ease-in-out), cubic-bezier(0.32, 0.72, 0, 1) (iOS drawer).
• Exits are quicker than entrances — about 60–70% of the enter duration. Broadly: slow where the user is deciding, fast where the system is responding.
• Distance is small. 4–12px for micro-moves; larger travel only when the element semantically comes from somewhere. Never enter from scale(0) — nothing real appears from nothing; start at scale(0.95) + opacity: 0.

Details that compound