Guides

Motion, state and time

Describe the change, its cause and its interruption policy.

Give motion a purpose

Motion can reveal causality, maintain spatial continuity, guide attention or establish rhythm. Tie an animation to an action, state transition, gesture, scroll position, timeline marker or external progress signal. A free-standing duration does not explain why movement occurs.

Separate three layers

A state describes a visually meaningful condition. An action requests a transition or operation. Motion describes property changes during that operation. This separation allows a dialog to be open even when reduced-motion preferences skip its entrance animation.

A timeline schedules clips and markers. It can coordinate typography, camera movement, scene changes and audio-visual cues. Timing values must use the documented units; adapters must not infer milliseconds from the magnitude of a number.

Tracks and interpolation

A track identifies the target property and its values or keyframes. Interpolation depends on the value type and coordinate space. A string label cannot be interpolated like a length, and color interpolation must use a stated color space when fidelity depends on it.

Spring parameters describe a physical model. A platform with a different animation model may approximate only when permitted and must disclose the difference. An exact duration and a physically settling spring are different constraints.

Decide what happens on interruption

A user can close a drawer while it is opening. Define whether the new request replaces, retargets, queues, blends or cancels the current motion. The target's current visual state is often the right starting point, but that behavior must be intentional.

An infinite animation should have a cancellation path. A state must not become unreachable merely because its animation was interrupted.

Reduced motion is an alternative expression

Keep information and final state intact while reducing unnecessary movement. Fade, immediate state changes and restrained emphasis can be appropriate alternatives, depending on the contract. Test both normal and reduced motion under actual platform settings.

The playground previews a limited subset. Use a capable target adapter and time-based evidence to assess a complete motion contract.