Motion · Foundations

Principles

Before animating anything, answer two questions: how often will people see it, and what is it for?

Frequency#

The more often something happens, the less it should move. Animation that delights once becomes friction the hundredth time.

Seen	Examples	Decision
100+ times a day	Command palette, keyboard shortcuts	No animation
Tens of times a day	Hover, list navigation, tabs	Very short or none
Occasionally	Dialogs, drawers, toasts	Standard animation
Rarely	Onboarding, success states	Room for delight

Every animation needs a reason. If the only reason is that it looks nice, and people see it often, leave it out.

A button scales down on press. The interface heard you.

A toast leaves the way it came, so swiping it away feels natural.

A label crossfades from Copy to Copied.

A card grows into its detail view, so you never lose your place.

Content below a collapsing panel slides up instead of snapping.

1Nothing appears from scale(0). Start at 0.95 with zero opacity.
2Never use ease-in for interface motion. It starts slow, exactly when the user is watching.
3Popovers grow from their trigger. Dialogs stay centered.
4Exit faster than you enter. The user already decided.
5Animate transform and opacity. Never transition: all.
6Use transitions, not keyframes, for things that can be interrupted. Transitions retarget, keyframes restart.
7Gate hover motion behind (hover: hover) and (pointer: fine).
8Never block input while an animation plays.