motion

Motion is the most abused tool in interface work because it is the most visible. This skill exists to make you write less of it, and to make what remains correct.

Before writing a line

Answer these in order. Each gate can end the task with zero code, and that is a good outcome.

1. How often will they see it?

Keyboard-initiated actions are instant. ⌘K, Escape, j/k, tab switching by shortcut: render the new state on the same frame. Motion here reads as latency.

2. What is it for?

Name one. If you cannot, stop.

• Acknowledge — the press, the toggle, the drop. Proof the interface heard them.
• Locate — where a thing came from or went. A popover grows from its trigger; a toast leaves the way it came.
• Continue — bridge two layouts so content does not teleport. Reordering, expanding, tab indicators.
• Signal — a state changed while they were not looking. A saved badge, a counter roll.
• Explain — show how something works. Marketing and onboarding only.

"Looks alive" is not a purpose. "Everything else has an animation" is not a purpose.

3. Which tool?

Cheapest that does the job, in this order:

Do not install a library for a fade. Do not hand-roll exit animations with setTimeout when Motion's AnimatePresence exists in the project.

4. Which properties?

transform and opacity. Both are composited; nothing else is reliably.

Never transition: all. List the properties. It is faster and it stops surprises.

5. Which curve?

Built-in ease-in-out and ease-out are too weak to feel intentional. Use the custom curves above and store them as tokens: --ease-out-expo, --ease-in-out-quart.

Never ease-in on an entrance. The user watches the first 50ms hardest; ease-in wastes them.

6. How long?

Exits run at roughly 70% of the entrance. Under 100ms is invisible; over 400ms in product UI is a wait. When in doubt, shorten by 20%.

7. Springs

For anything the user drags, throws, or that must feel physical:

Bounce is almost never right in product UI. A spring should overshoot by a pixel or two at most; if it wobbles, raise damping.

8. Where from?

Set transform-origin to the trigger. A popover from a button in the top-right grows from its top-right corner. Dialogs are the exception: they are centred and scale from centre. Toasts come from the edge they will leave by.

9. Staggers

Stagger only lists that arrive together, once. 12–25ms between items, capped: after the eighth item, no more delay, or the tail arrives after the user has started reading. Never stagger on re-render or filter changes.

10. Interruption

A user who closes a menu while it is still opening must see it reverse from where it is, not finish opening then close. CSS transitions do this by default. Keyframes do not. Motion does. If you used keyframes for something interruptible, you used the wrong tool.

11. Exit

Exits are deliberate: shorter, simpler, often just opacity. A dialog that fades and scales in can fade only on the way out. Nothing should be visible for even a frame after the user dismissed it and then start disappearing; the first frame after the click is already changed.

12. Reduced motion

Ship it in the same change:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

In Motion, useReducedMotion() and swap transforms for opacity. Smooth scrolling libraries are disabled entirely. Everything that would have animated in is simply visible.

Recipes

Menu / popover

.menu {
  transform-origin: var(--origin, top left);
  transition: opacity 160ms var(--ease-out-expo), transform 160ms var(--ease-out-expo);
}
.menu[data-state="closed"] { opacity: 0; transform: scale(0.96) translateY(-2px); }
.menu[data-state="open"] { opacity: 1; transform: none; }

Dialog

<motion.div
  initial={{ opacity: 0, scale: 0.97, y: 6 }}
  animate={{ opacity: 1, scale: 1, y: 0 }}
  exit={{ opacity: 0, transition: { duration: 0.15 } }}
  transition={{ duration: 0.26, ease: [0.16, 1, 0.3, 1] }}
/>

Backdrop fades separately, slightly longer on the way in, shorter on the way out.

Toast

Enter from the edge it lives on, ease-out, ~280ms. Stack older toasts behind with scale(0.95) and translateY(-8px), dimmed. Exit toward the same edge at ~180ms. Pause timers on hover and when the tab is hidden.

Height to content

.grid { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms var(--ease-in-out-quart); }
.grid[data-open] { grid-template-rows: 1fr; }
.grid > * { overflow: hidden; min-height: 0; }

Tab indicator

One element with layoutId (Motion) sprung between tabs; never animate left/width on each tab.

Hover highlight that glides between rows

One absolutely positioned pill, position updated on pointerenter, animated with the "following the pointer" spring. Remove on pointerleave with a 150ms fade.

Number change

Animate digits rolling, not the whole number fading. Use a library that handles digit columns (NumberFlow) rather than writing it.

Text reveal (marketing only)

Split into words, opacity 0→1, y 6→0, filter blur(6px→0), 30ms between words, once, on first view.

Anti-patterns

Performance

will-change: transform only on elements about to animate, removed after. Avoid animating anything with backdrop-filter. Large blurs are expensive; keep radius under 8px and area small. Test on a throttled CPU: if it drops frames, cut the property, not the duration.

From the catalogue

• You Don't Need Animations — the frequency argument.
• Motion — the React animation library these recipes assume.
• GSAP — timelines, scrub, SplitText.
• Easing Wizard, Anime.js Easing Editor — build and compare curves.
• Transitions.dev — the handful of transitions web apps need.
• NumberFlow — digit rolling done right.
• 60fps, Design Spells — study recordings before inventing.
• More at stealth.pm/build and stealth.pm/tools.