The deliberate use of motion in an interface to communicate state changes, orient users within a flow, and reinforce an action's outcome. UI animation is purposeful — it should reduce confusion and increase clarity, not merely decorate. The best animations are fast enough to feel responsive, slow enough to be understood, and reduced or removed for users with motion sensitivity preferences.
Common contexts
- Animating a sidebar panel sliding in from the edge to communicate spatial context
- Using a progress bar animation to reassure users during a slow file upload
- Fading out deleted list items so users understand where content went, not that it vanished
Use when
Add animation when a state change is abrupt enough to disorient users — particularly when content appears, disappears, moves, or transitions between contexts. A 200–300ms ease-out on modal entries and 150ms on hover state transitions is usually the right range before animation starts feeling slow.
Avoid when
Animation that plays on every page load or persists after the user has learned the pattern adds perceptual cost with no benefit — it slows down experienced users who already understand the metaphor. Any animation that cannot be disabled also creates real harm for users with vestibular disorders.
If you can't articulate what the animation communicates in one sentence, it's decoration — and decoration should always be the first thing cut when performance or accessibility budgets are tight.
Real-world examples
- Google's Material Design specification defines motion curves (easing functions) for element transitions so that UI animations feel physically grounded across all Android apps.
- Apple's iOS app-open animation scales the icon up into the full-screen app, giving users a spatial sense of where the interface originated.
- Stripe's payment confirmation page uses a subtle success animation—a morphing checkmark—to reassure users that a transaction completed successfully.