Motion System Guidelines
Animation and transition specifications for Material Design 3.
Motion Principles
Four Core Characteristics
| Principle |
Description |
| Responsive |
Quickly responds to user input at the point of interaction |
| Natural |
Follows real-world physics (gravity, friction, momentum) |
| Aware |
Elements are aware of surroundings and other elements |
| Intentional |
Guides focus to the right place at the right time |
Duration Guidelines
By Interaction Type
| Type |
Duration |
Usage |
| Micro |
50-100ms |
Ripples, state changes, hover |
| Short |
100-200ms |
Simple transitions, toggles |
| Medium |
200-300ms |
Expanding, collapsing, revealing |
| Long |
300-500ms |
Complex choreography, page transitions |
By Device Type
| Device |
Typical Duration |
Adjustment |
| Mobile |
300ms |
Baseline |
| Tablet |
390ms |
+30% slower |
| Desktop |
150-200ms |
Faster, more responsive |
| Wearable |
210ms |
-30% faster |
Duration Rules
- Maximum: Keep under 400ms for most transitions
- User-initiated: Faster (closer to instant feedback)
- System-initiated: Can be slightly longer
- Loading states: Use indeterminate indicators for unknown duration
Easing Curves
Standard Curves
| Curve |
Usage |
Characteristics |
| Standard |
Most common transitions |
Quick acceleration, slow deceleration |
| Emphasized |
Important/significant transitions |
More dramatic curve |
| Decelerate |
Elements entering screen |
Starts fast, ends slow |
| Accelerate |
Elements leaving screen permanently |
Starts slow, ends fast |
| Sharp |
Elements temporarily leaving |
Quick, snappy motion |
Curve Values (Cubic Bezier)
| Curve |
Value |
| Standard |
cubic-bezier(0.2, 0.0, 0.0, 1.0) |
| Emphasized |
cubic-bezier(0.2, 0.0, 0.0, 1.0) |
| Decelerate |
cubic-bezier(0.0, 0.0, 0.0, 1.0) |
| Accelerate |
cubic-bezier(0.3, 0.0, 1.0, 1.0) |
Movement Patterns
Arc Motion
- Use natural, concave arcs for diagonal movement
- Single-axis movement (horizontal/vertical only) stays straight
- Elements entering/exiting screen move on single axis
Choreography
- Stagger: Offset timing for related elements (20-40ms between)
- Cascade: Sequential reveal from a focal point
- Shared motion: Elements that move together maintain relationship
Transition Patterns
Container Transform
Best for: Navigation from card/list item to detail screen
- Origin container morphs into destination
- Maintains visual continuity
- Content fades during transformation
Shared Axis
Best for: Same-level navigation (tabs, stepper)
| Axis |
Direction |
Usage |
| X-axis |
Horizontal |
Tabs, horizontal paging |
| Y-axis |
Vertical |
Vertical lists, feeds |
| Z-axis |
Depth |
Parent-child relationships |
Fade Through
Best for: Unrelated screen transitions
- Outgoing content fades out
- Incoming content fades in
- Brief overlap period
- No shared elements
Fade
Best for: Show/hide single elements
- Simple opacity change
- Optionally combine with scale
- Quick duration (100-200ms)
Component-Specific Motion
FAB
| State |
Animation |
| Appear |
Scale up + fade in |
| Disappear |
Scale down + fade out |
| Transform |
Morph to extended FAB |
| Press |
Elevation change (3dp → 8dp) |
Bottom Sheet
| State |
Animation |
| Expand |
Slide up with decelerate curve |
| Collapse |
Slide down with accelerate curve |
| Dismiss |
Swipe down with velocity-based duration |
Navigation
| Pattern |
Animation |
| Push |
Incoming slides from right, outgoing shifts left |
| Pop |
Incoming slides from left, outgoing shifts right |
| Modal |
Slide up from bottom |
Cards
| State |
Animation |
| Expand |
Container transform to detail |
| Press |
Subtle elevation increase |
| Reorder |
Follow finger with physics |
Loading & Progress
Indeterminate Indicators
- Use for unknown duration
- Continuous, looping animation
- M3 Expressive: Customizable waveform and thickness
Determinate Indicators
- Use when progress is measurable
- Smooth, linear progression
- Update frequently for responsiveness
Skeleton Screens
- Show layout structure immediately
- Subtle shimmer animation
- Replace with content as it loads
Accessibility Considerations
Reduced Motion
- Respect prefers-reduced-motion setting
- Provide alternatives:
- Instant transitions (no animation)
- Simple fade instead of complex motion
- Static loading indicators
Motion Duration
- Keep essential feedback < 100ms
- Avoid motion that could trigger vestibular issues
- Test with motion sensitivity settings enabled
Implementation Notes
Android Animation APIs
| API |
Usage |
| MotionLayout |
Complex, coordinated animations |
| Transition |
Activity/Fragment transitions |
| Animator |
Property animations |
| AnimatedContent |
Compose content transitions |
| animateContentSize |
Compose size changes |
Performance Tips
- Use hardware layers for complex animations
- Avoid animating layout properties (use transform)
- Profile with GPU rendering tools
- Target 60 FPS (16ms per frame)
