06 — Motion System
Choreography
Choreography governs the sequencing and coordination of multiple animations within a single state transition or across a composed set of components. IDL defines three choreography models: stagger, cascade, and parallel. Choreography declarations reference component slots and state transitions — they do not reference DOM elements, CSS selectors, or platform-specific animation primitives.
Choreography Models
| Model | Behavior | Typical Use |
|---|---|---|
| parallel | All animations begin simultaneously. | Simple multi-property transitions on a single component. |
| stagger | Animations begin in sequence with a declared offset between each. | List item entry, grid card appearance, menu item reveal. |
| cascade | Animations are triggered by the completion of the preceding animation. | Multi-step complex transitions where each step depends on the previous. |
Choreography Declaration
A choreography declaration specifies the model (parallel, stagger, or cascade), the target slot or state transition, the duration and easing tokens for each animation step, and — for stagger — the offset between successive animations expressed as a duration token. The compiler validates that all referenced slots and state transitions are declared in the component specification.
Choreography and Accessibility
Choreography declarations carry the same reduced-motion suppression requirement as individual motion declarations. When motion is suppressed, stagger and cascade choreography MUST collapse to parallel (simultaneous), and the effective duration MUST use motion.duration.instant unless the choreography specifies an explicit reduced-motion fallback. Platform emitters are responsible for implementing this behavior.