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