VOL. III · CH. 3.35 · COMPONENT
Animations & Transitions
Motion that explains a change in state — not motion for its own sake.
1 min read · 125 words
3.35.1Definition & Purpose
Animation communicates state change (an item was added, a panel opened) by showing the transition rather than an instant jump cut, helping users track cause and effect.
3.35.2Common Mistakes
- Animations long or elaborate enough to feel like they're slowing the user down rather than helping.
- No respect for reduced-motion accessibility preferences, which can trigger discomfort for some users.
3.35.3Best Practices
- Keep functional transitions short (roughly 150–300ms) — fast enough to feel responsive, slow enough to be perceived.
- Respect the operating system's reduced-motion setting, disabling non-essential animation when it's active.
ExampleA shopping cart icon that briefly animates when an item is added gives clear confirmation of the action without requiring a separate toast notification (3.23) for something this minor.