DSDS Motion Guideline

3 definitions in this file:

motionDuration
motionEntry
motion

Minimum recommended duration as a time value or token reference (e.g., '200ms', '0.3s', 'duration-quick'). When omitted, there is no minimum recommendation.

Maximum recommended duration as a time value or token reference (e.g., '500ms', '0.5s', 'duration-slow'). When omitted, there is no maximum recommendation.

Freeform duration guidance. Use when the recommendation cannot be expressed as a min/max range (e.g., 'Depends on element size — use shorter durations for small elements and longer durations for full-screen transitions'). Also useful for supplementary notes when min/max are provided.

References:

richText

Machine-readable name of the easing (e.g., 'expressive', 'enter', 'exit', 'lateral', 'bounce', 'linear'). Used for cross-referencing and tooling.

What this easing is for, when to use it, and how it affects the user experience. Explain the visual character of the curve and the types of transitions it suits.

Human-readable name of the easing (e.g., 'Expressive Ease', 'Enter Ease', 'Exit Ease').

Cubic-bezier control points as a four-number array [P1x, P1y, P2x, P2y], aligned with the W3C Design Tokens Format Module cubicBezier type (§8.6). P1x and P2x MUST be in [0, 1]. P1y and P2y can be any real number (values outside [0, 1] produce bounce/overshoot effects). Maps to CSS cubic-bezier() and DTCG cubicBezier token values. When omitted, the easing is described in the description field or references a token via `token`.
Min items: 4

Reference to a DTCG cubicBezier or transition token that defines this easing (e.g., 'motion-ease-expressive', 'transition-enter'). When both `function` and `token` are present, `function` is the display value and `token` is the authoritative source.

Recommended duration range when using this easing. Different easings suit different durations — enter transitions are typically longer (300–500ms) to draw attention, while exit transitions are shorter (200–300ms) to feel responsive.

A short, comma-separated list of usage contexts (e.g., 'entering elements', 'exiting elements', 'lateral navigation', 'micro-interactions'). Provides a scannable summary — use description for detailed guidance.

Visual or interactive examples showing this easing in action — screen recordings, interactive curve visualizations, or CSS code snippets.

References: richText, motionDuration, example

Identifies this guideline as a motion spec.

Named easing definitions in the motion system. Each item documents a single easing curve with its cubic-bezier function, recommended duration, and usage guidance. Ordering is significant — tools SHOULD display easings in this order.
Min items: 1

An overview of the motion system — the philosophy behind easing choices, how duration and easing interact, and system-wide motion principles not covered by individual easing entries.

Agent-optimized context for this document block. Provides structured information for AI/LLM consumption — constraints, disambiguation, anti-patterns, examples, and keywords.

References: richText, motionEntry, agents