Material Design 3 Motion and Animation

Overview

This skill guides the implementation of Material Design 3 (M3) Expressive motion principles to create springy, natural-feeling animations that enhance usability and delight users.

Keywords: Material Design 3, M3, motion, animation, transitions, micro-interactions, easing, duration, spring physics, expressive motion, haptics, physics-based animation

Core Principles

Expressive Motion Philosophy

M3 Expressive motion is designed to feel alive, natural, and responsive:

1. Physics-Based Springs: Use spring-based animations governed by stiffness, damping, and velocity — replacing traditional cubic-bezier easing for more natural, lively motion
2. Purposeful Motion: Every animation should serve a purpose—guiding attention, providing feedback, or showing relationships
3. Responsive Feel: Motion responds to user input with appropriate speed and timing
4. Spatial Coherence: Elements move in ways that respect spatial relationships and physics
5. Haptic Integration: Pair spring animations with platform-native haptic feedback for tactile reinforcement

Motion Modes

Expressive Motion (Default for M3 Expressive):

• Overshoots, bounces, and adds energy
• Ideal for touch interactions and hero moments
• Creates a playful, emotionally resonant feel
• Uses higher spring energy and pronounced bounce

Standard Motion (Utilitarian flows):

• Restrained, minimal bounce
• Better for productivity-focused or system-critical flows
• Natural feel without excess playfulness

Legacy Motion (Compatibility):

• Traditional easing for backwards compatibility
• Use only when spring physics cannot be applied

Spring Physics Parameters

M3 Expressive motion uses three key physics parameters instead of traditional time/easing curves:

1. Stiffness: Controls how "hard" the spring is — higher stiffness means the animation finishes more quickly
2. Damping: Determines how quickly the bounce fades out — a damping value of 1 eliminates bounce completely
3. Initial Velocity: Sets the initial speed, influencing overall timing and feel

Scheme	Stiffness	Damping	Bounce Effect
Expressive	High	Medium	Pronounced overshoot
Standard	Medium	High	Minimal/none

Animation Types

1. Transitions

Enter Transitions (Elements appearing):

• Fade + Scale: Elements fade in while scaling from 80% to 100%
• Fade + Slide: Elements slide in from edge while fading
• Container Transform: Morphing one container into another

Exit Transitions (Elements disappearing):

• Fade + Scale: Elements scale down to 80% while fading out
• Fade + Slide: Elements slide away while fading
• Keep exits faster than enters (maintain forward momentum)

Shared Element Transitions (Between screens/states):

• Morph containers smoothly between views
• Maintain visual continuity
• Use container transform pattern

2. Micro-interactions

Hover States:

• Subtle elevation change (add shadow)
• Color shift using state layer
• Scale slightly (1.02x-1.05x)
• Duration: 100-200ms

Focus States:

• Outline or ring animation
• Scale or elevation change
• Duration: 200-300ms

Press/Touch States:

• Ripple effect from touch point
• Scale down slightly (0.98x)
• State layer with opacity
• Duration: 100-150ms

Loading States:

• Shimmer or skeleton screens
• Circular progress indicators
• Linear progress bars
• Continuous, smooth motion

3. Complex Animations

Stagger Animations:

• Animate list items with incremental delay
• Delay between items: 30-50ms
• Creates cascade effect

Choreographed Animations:

• Multiple elements moving in coordination
• Use animation-delay for orchestration
• Maintain spatial relationships

Morphing Shapes:

• Smooth path interpolation between shapes
• Variable corner radius transitions
• Use for state changes and transformations

Duration Guidelines

Standard Durations

Extra Small (50-100ms):

• Icon state changes
• Tooltip appearances
• Simple opacity changes

Small (100-200ms):

• Button hover states
• Simple scale animations
• Color transitions

Medium (200-300ms):

• Modal dialogs
• Navigation transitions
• Card expansions

Large (300-500ms):

• Page transitions
• Complex transformations
• Sheet presentations

Extra Large (500ms+):

• Major state changes
• Full screen transitions
• Use sparingly

Context-Based Adjustments

• Mobile: Slightly faster (0.8x-0.9x of base duration)
• Desktop: Standard durations
• Reduced Motion: Reduce to 10-20% of standard duration or disable
• Large Elements: Increase duration proportionally

Spring Physics Implementation

Expressive Spring (Default for M3 Expressive)

/* CSS with expressive spring-like bezier approximation */
transition-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1.0);

/* Enhanced linear() for expressive spring with overshoot */
transition-timing-function: linear(
  0, 0.004, 0.016 2.5%, 0.063 5%, 0.141, 0.25, 
  0.391 11.3%, 0.563, 0.765, 1.000 20%, 1.066 23.8%, 
  1.109 27.5%, 1.130 31.3%, 1.138 35%, 1.136 38.8%, 
  1.121 46.3%, 1.093 53.8%, 1.057 61.3%, 1.025 68.8%, 
  1.005 77.5%, 0.997 87.5%, 1
);

Standard Spring

/* CSS with standard spring-like bezier approximation */
transition-timing-function: cubic-bezier(0.2, 0.0, 0, 1.0);

/* CSS linear() for better standard spring approximation */
transition-timing-function: linear(
  0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 
  0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 
  1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 
  1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 
  0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1
);

JavaScript (Web Animations API)

// Expressive spring animation
element.animate(
  [
    { transform: 'scale(0)', opacity: 0 },
    { transform: 'scale(1)', opacity: 1 }
  ],
  {
    duration: 300,
    easing: 'cubic-bezier(0.05, 0.7, 0.1, 1.0)',
    fill: 'forwards'
  }
);

// Standard spring animation
element.animate(
  [
    { transform: 'translateY(20px)', opacity: 0 },
    { transform: 'translateY(0)', opacity: 1 }
  ],
  {
    duration: 250,
    easing: 'cubic-bezier(0.2, 0.0, 0, 1.0)',
    fill: 'forwards'
  }
);

Choosing Expressive vs Standard Motion

Scenario	Motion Mode	Why
Button press feedback	Expressive	User-triggered, benefits from bounce
Page transition	Standard	Functional, should not distract
Loading completion	Expressive	Celebratory moment of delight
Form validation	Standard	Utilitarian feedback
FAB expansion	Expressive	Key interaction with visual emphasis
List scroll	Standard	Continuous motion, should be smooth
Shape morphing	Expressive	Visual storytelling moment
Tooltip appearance	Standard	Informational, should not distract

Haptics Integration

M3 Expressive recommends pairing spring-driven animations with platform-native haptic feedback:

Principles

1. Coordinate with Motion: Haptic effects should fire at the key moment of the animation (e.g., at the point of overshoot or completion)
2. Match Intensity: Gentle haptics for subtle interactions, stronger for significant state changes
3. Platform-Native: Use the platform's haptic engine for the most natural feel
4. Respect Preferences: Honor user haptic settings and provide accessibility options

Web Implementation

// Pair haptic feedback with expressive motion
function expressivePress(element) {
  // Trigger haptic feedback
  if (navigator.vibrate) {
    navigator.vibrate(10); // Short, subtle haptic
  }
  
  // Trigger spring animation
  element.animate([
    { transform: 'scale(1)' },
    { transform: 'scale(0.95)' },
    { transform: 'scale(1.02)' },
    { transform: 'scale(1)' }
  ], {
    duration: 300,
    easing: 'cubic-bezier(0.05, 0.7, 0.1, 1.0)'
  });
}

Implementation Patterns

Container Transform

Smoothly morph from one container to another:

// Using View Transitions API (modern browsers)
document.startViewTransition(() => {
  // Update DOM
  container.classList.toggle('expanded');
});

// CSS
::view-transition-old(container),
::view-transition-new(container) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.2, 0.0, 0, 1.0);
}

Shared Axis Transition

Elements exit and enter along a shared axis:

/* X-axis shared transition */
.exit-left {
  animation: exit-left 300ms cubic-bezier(0.2, 0.0, 0, 1.0);
}

.enter-right {
  animation: enter-right 300ms cubic-bezier(0.2, 0.0, 0, 1.0);
}

@keyframes exit-left {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-100px); opacity: 0; }
}

@keyframes enter-right {
  from { transform: translateX(100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

Elevation Change

Animate elevation with shadow and transform:

.elevated-card {
  transition: 
    box-shadow 200ms cubic-bezier(0.2, 0.0, 0, 1.0),
    transform 200ms cubic-bezier(0.2, 0.0, 0, 1.0);
}

.elevated-card:hover {
  box-shadow: 
    0px 4px 8px rgba(0, 0, 0, 0.12),
    0px 8px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

Ripple Effect

Material ripple for touch feedback:

.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
}

.ripple:active::after {
  width: 300%;
  height: 300%;
}

Best Practices

Do's

1. ✅ Use spring physics for natural motion
2. ✅ Match animation duration to element size (larger = longer)
3. ✅ Provide immediate feedback for user interactions
4. ✅ Use motion to show relationships between elements
5. ✅ Test animations on lower-end devices
6. ✅ Respect prefers-reduced-motion setting
7. ✅ Use stagger animations to make large datasets feel lighter
8. ✅ Keep motion purposeful and functional

Don'ts

1. ❌ Don't use linear easing (feels mechanical)
2. ❌ Don't animate too many properties simultaneously
3. ❌ Don't make animations too slow (feels sluggish)
4. ❌ Don't ignore accessibility preferences
5. ❌ Don't use motion purely for decoration
6. ❌ Don't animate layout properties excessively (causes reflow)
7. ❌ Don't use different easing curves randomly

Accessibility

Reduced Motion

Always respect user preferences:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Focus Indicators

Ensure animated focus states are still visible:

• Maintain adequate contrast
• Don't rely solely on motion for focus indication
• Use both color and shape changes

Performance

• Prefer transform and opacity (GPU accelerated)
• Avoid animating width, height, top, left (causes layout reflow)
• Use will-change sparingly for complex animations
• Test on mobile devices and low-end hardware

Motion Tokens

Define motion tokens for consistency. M3 Expressive introduces tokenized spring-based motion:

:root {
  /* Durations */
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;
  --md-sys-motion-duration-long3: 550ms;
  --md-sys-motion-duration-long4: 600ms;
  
  /* Easing — Standard (utilitarian) */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0.0, 0.0, 0, 1.0);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0.0, 1.0, 1.0);
  
  /* Easing — Expressive (default for M3 Expressive) */
  --md-sys-motion-easing-expressive: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --md-sys-motion-easing-expressive-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --md-sys-motion-easing-expressive-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);
  
  /* Easing — Emphasized (legacy naming, same as expressive) */
  --md-sys-motion-easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);
  
  /* Legacy easing */
  --md-sys-motion-easing-legacy: cubic-bezier(0.4, 0.0, 0.2, 1.0);
  
  /* Expressive tokenized motion (new in M3 Expressive) */
  --md-sys-motion-expressive-fast-spatial: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --md-sys-motion-expressive-fast-effects: cubic-bezier(0.2, 0.0, 0, 1.0);
  --md-sys-motion-expressive-slow-spatial: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --md-sys-motion-expressive-slow-effects: cubic-bezier(0.2, 0.0, 0, 1.0);
}

Checklist for Motion Implementation

When implementing M3 motion, ensure:

• Spring-based physics easing is used (not linear or ease-in-out)
• Expressive vs standard motion modes are chosen appropriately per context
• Durations match element size and complexity
• Reduced motion preferences are respected
• Only transform and opacity are animated (when possible)
• Hover, focus, and press states have appropriate feedback
• Page transitions feel smooth and coherent
• Motion serves a functional purpose
• Stagger animations are used for lists
• All animations are tested on mobile devices
• Motion tokens are defined and used consistently (including expressive tokens)
• Container transforms are used for view transitions
• Ripple effects are implemented for touch targets
• Haptic feedback is coordinated with spring animations where appropriate
• Shape morphing animations use expressive easing

Resources

• examples/motion-patterns.css — Ready-to-use CSS animation patterns using M3 motion tokens (fade, scale, slide, shared axis, state layer, elevation, and theme transitions). Copy the relevant @keyframes and classes into your project.
• M3 motion overview: https://m3.material.io/styles/motion/overview
• Material Design Tokens (motion): https://github.com/material-foundation/material-tokens