Motion enhances user experience by providing visual feedback and spatial awareness. Follow these principles to ensure consistent interactive experiences.
Design Principles
- Purposeful — Motion serves function, not decoration. Every animation should convey information or guide attention
- Responsive — Interaction feedback should be immediate; avoid making users wait
- Natural — Use the laws of motion from the physical world; avoid linear or abrupt transitions
Transition Durations
| Token | Duration | Usage |
|---|---|---|
duration-instant | 100ms | Toggle switches, button state changes |
duration-fast | 150ms | Hover effects, focus indicators, ripples |
duration-normal | 250ms | Expand/collapse, tab switching |
duration-slow | 350ms | Modal dialogs, page transitions |
duration-slower | 500ms | Complex layout animations, initial load |
Easing Curves
Click each curve to preview the animation timing.
Standard
cubic-bezier(0.2, 0, 0, 1)Most UI transitionsDecelerate
cubic-bezier(0, 0, 0, 1)Elements enteringAccelerate
cubic-bezier(0.3, 0, 1, 1)Elements leavingLinear
linearProgress barsCommon Interaction Animations
Button
- Hover: background color transition
150ms standard - Press: scale to
0.98+ ripple effect - Disabled: no animation, opacity reduced directly
Dialog
- Open: scale in from center + backdrop fade in
250ms decelerate - Close: fade out
200ms accelerate
Tabs
- Switch: underline slides
250ms standard - Content area: fade in
150ms
Expand / Collapse
- Height transition:
250ms standard - Combined with rotating chevron icon:
150ms standard