3 definitions in this file:
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 identifier 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
[
{
"identifier": "expressive",
"name": "Expressive Ease",
"description": "The most commonly used easing, and a reliable default choice when unsure. Suitable for elements that both begin and end within the user's field of view, such as size or position changes. Also appropriate for elements entering or exiting in sync with other visible elements.",
"function": [
0.55,
0,
0,
1
],
"token": "motion-ease-expressive",
"usage": "moving, pushing, resizing",
"duration": {
"description": "Depends on element size — use shorter durations for small elements and longer durations for full-screen transitions."
},
"examples": [
{
"title": "Pin opening/closing animation",
"presentation": {
"kind": "url",
"url": "https://storybook.acme.com/?path=/story/motion-expressive--pin-open"
}
}
]
},
{
"identifier": "enter",
"name": "Enter Ease",
"description": "Used for elements that initially exist out of view and smoothly enter the screen. Also appropriate for elements that snap into position after being released from a drag interaction.",
"function": [
0.05,
0.7,
0.1,
1
],
"token": "motion-ease-enter",
"usage": "entering elements, snap-to-position after drag",
"duration": {
"min": "300ms",
"max": "500ms",
"description": "Enter transitions use longer durations to help users direct their attention to new elements appearing on screen."
}
},
{
"identifier": "exit",
"name": "Exit Ease",
"description": "Used for elements that begin within the user's field of view and passively disappear from the screen without direct user interaction.",
"function": [
0.3,
0,
0.8,
0.15
],
"token": "motion-ease-exit",
"usage": "passive exiting, dismissal",
"duration": {
"min": "200ms",
"max": "300ms",
"description": "Exit transitions use shorter durations as they require less user attention."
}
},
{
"identifier": "lateral",
"name": "Lateral Ease",
"description": "Used for smooth horizontal transitions of elements at the same hierarchy level, like swiping between tabs or navigating a carousel. Creates natural movement by starting slowly, accelerating in the middle, and slowing toward the end.",
"function": [
0.8,
0,
0.2,
1
],
"token": "motion-ease-lateral",
"usage": "tab navigation, carousel swiping, horizontal transitions",
"duration": {
"min": "400ms",
"max": "500ms"
}
},
{
"identifier": "bounce",
"name": "Bounce Ease",
"description": "Used for light and fun motion that allows users to interact playfully. The overshoot creates a sense of weightlessness. Commonly used for floating elements like toolbars.",
"function": [
0,
0.4,
0,
1.4
],
"token": "motion-ease-bounce",
"usage": "floating elements, toolbar animations, micro-interactions",
"duration": {
"min": "100ms",
"max": "200ms"
}
},
{
"identifier": "linear",
"name": "Linear Ease",
"description": "Used for properties unrelated to spatial motion, such as opacity and color changes. A background color change on hover or a fade-in/fade-out can happen linearly as it provides direct feedback about state without implying physical movement.",
"function": [
0,
0,
1,
1
],
"token": "motion-ease-linear",
"usage": "opacity changes, color transitions, toggles, checkboxes",
"duration": {
"description": "Duration varies by context — use the shortest duration that produces a perceptible transition without feeling abrupt."
}
}
]
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.
AI-ready context for this document block. Provides structured info for AI/LLM use: constraints, disambiguation, anti-patterns, examples, and keywords.
References:
richText, motionEntry, agents
{
"kind": "motion",
"description": "The motion system defines how animated transitions behave across the product. Easing curves control the acceleration profile of animations, making movement feel natural and responsive. Duration is chosen based on transition size (smaller areas get shorter durations) and direction (enter transitions are longer than exit transitions to draw attention).",
"items": [
{
"identifier": "expressive",
"name": "Expressive Ease",
"description": "The default easing for most transitions. Suitable for elements that change size or position within the viewport.",
"function": [
0.55,
0,
0,
1
],
"token": "motion-ease-expressive",
"usage": "moving, pushing, resizing",
"duration": {
"description": "Depends on element size."
}
},
{
"identifier": "enter",
"name": "Enter Ease",
"description": "For elements entering the viewport from off-screen or snapping into position after a drag.",
"function": [
0.05,
0.7,
0.1,
1
],
"token": "motion-ease-enter",
"usage": "entering elements",
"duration": {
"min": "300ms",
"max": "500ms"
}
},
{
"identifier": "exit",
"name": "Exit Ease",
"description": "For elements passively leaving the viewport without direct user interaction.",
"function": [
0.3,
0,
0.8,
0.15
],
"token": "motion-ease-exit",
"usage": "exiting elements",
"duration": {
"min": "200ms",
"max": "300ms"
}
},
{
"identifier": "lateral",
"name": "Lateral Ease",
"description": "For horizontal transitions between peers at the same hierarchy level.",
"function": [
0.8,
0,
0.2,
1
],
"token": "motion-ease-lateral",
"usage": "tab navigation, carousels",
"duration": {
"min": "400ms",
"max": "500ms"
}
},
{
"identifier": "bounce",
"name": "Bounce Ease",
"description": "For playful micro-interactions on floating elements like toolbars.",
"function": [
0,
0.4,
0,
1.4
],
"token": "motion-ease-bounce",
"usage": "floating elements, micro-interactions",
"duration": {
"min": "100ms",
"max": "200ms"
}
},
{
"identifier": "linear",
"name": "Linear Ease",
"description": "For non-spatial property changes like opacity and color.",
"function": [
0,
0,
1,
1
],
"token": "motion-ease-linear",
"usage": "opacity, color transitions"
}
]
}
Design System Documentation Spec (DSDS) 0.2.1 — Draft Specification
GitHub