When to animate
Frequent interactions should never animate. Here's why.
## The frequency test
| Frequency | Examples | Decision |
| ------------------- | -------------------------------------------------- | -------------------------- |
| 100+ times a day | Keyboard shortcuts, command palette, arrow-key nav | **Never animate.** |
| Tens of times a day | Hover effects, list navigation, link rollovers | Remove or radically reduce |
| Occasional | Modals, drawers, tooltips, toasts | Standard animation |
| Rare or first-time | Onboarding, success states, milestones | Room for delight |
## The four purposes of motion
If it doesn't fit one of these four, cut it.
**Feedback**: confirms an action. Button scales on press. Toggle slides.
**Orientation**: shows spatial relationships. Drawer slides from its edge. Popover scales from its trigger.
**Continuity**: preserves context across state changes. Tab indicator slides between tabs. Shared element morphs from list to detail.
**Delight**: adds personality. Confetti on a milestone. Spring overshoot on a badge. Only works because it's rare.
}
/>
## Common mistakes
**Animating everything because the design system has a transition token.** Tokens are tools, not requirements.
**Page navigation with a 600ms transition.** 200ms max. A shared-element transition on key content beats animating the entire viewport.
**Animating focus rings or text selection.** Set `transition: none` on focus-visible outlines.