Design system · Component review 15

Demo motion

An animated specimen needs an obvious place to play and controls that never become part of the movement. The Guide keeps its original token demonstration; both shared versions pause on load and animate the same item.

Adopted default: the shared DemoMotion now separates its animation stage from the playback deck. Play, pause and replay the two shared examples. Replay restarts the actual animation timeline; the Guide continues to follow the OS motion preference.

Playback for one specimen

The candidate changes the chrome surrounding the animation, not its duration, easing or rotation.

01

Original Guide

Two ambient motion tokens

animation:fade|slow|smooth
animation:zoom|fast|overshoot

The Motion Guide keeps its authored pair of examples and applies animation only when motion is allowed by the user preference.

02

Previous

Shared playback controls

↗
Animation controls

The previous shared scene started paused and supported Play, Pause and Replay, but the edge between stage and controls was implicit.

03

Adopted

Separated stage and control deck

↗
Animation controls

A fine frame contains the animated stage, while a quiet adjacent deck gives playback controls their own place without entering the scene.

Actual Reference use

The animation play-state reference uses a native checkbox and real CSS conditions, independent of shared playback chrome.

Open /reference/animation-play-state
Run an animation
animation-play-state: Run an animation controls
The native checkbox and authored selectors control the child’s CSS play state. Pausing preserves its time. Reduced motion keeps it paused; print removes the animation.

The control in that lesson directly changes the element’s CSS play state. Shared playback controls are for explaining an animation timeline when the lesson itself does not supply a control.