Motion

Updated 2026-05-19

Motion tokens cover three dimensions: duration (how long), easing (how it accelerates), and delay (when it starts). All three must be specified together for any animated component.

Tokens

duration

Duration controls the speed of a transition. Smaller, simpler components move faster; larger, complex surfaces take slightly more time to respect their physical weight.

Token	Value	Usage
--zen-motion-duration-instant	100ms	Micro-feedback: button hovers, checkbox toggles, radio buttons, focus rings
--zen-motion-duration-fast	200ms	Small scale: tooltip fade-ins, dropdown/select expansions, tag dismissals
--zen-motion-duration-base	300ms	Structural changes: collapse/accordion expanding, toast notifications sliding in
--zen-motion-duration-slow	400ms	Large surfaces: modal scaling in, drawer (side panel) sliding in

easing

Easing curves give motion a natural, physical feel.

Token	Value	Usage
--zen-motion-ease-entrance	ease-out	Fast start, slow finish. Objects entering the screen (e.g. modals, drawers). Feels responsive but settles smoothly.
--zen-motion-ease-exit	ease-in	Slow start, fast finish. Objects leaving the screen (e.g. closing a side nav, dismissing a toast). Gets out of the user's way quickly.
--zen-motion-ease-standard	ease-in-out	Smooth start and finish. Elements moving from point A to B, or expanding internally (e.g. accordions opening, progress bars filling).

delay

Delay dictates the pause before the motion duration begins.

Token	Value	Usage
--zen-motion-delay-stagger	20ms	Choreography: applied incrementally to list items, table rows, or search result cards as they enter the screen
--zen-motion-delay-intent	300ms	Hover protection: standard wait time before revealing a tooltip or complex glossary popover. Prevents accidental visual noise.
--zen-motion-delay-long	500ms	Feedback holding: used for temporary success states before they auto-dismiss (e.g. a toast lingering before sliding out)

Patterns

Drawer (open/close)

Slug: drawer-open-close

Phase	Duration	Easing	Behavior
Open	duration-slow	ease-entrance	Slides in from the right
Close	duration-base	ease-exit	Slides out to the right

Accordion (expand/collapse)

Slug: accordion-expand-collapse

Phase	Duration	Easing	Behavior
Expand	duration-base	ease-standard	Height animates open; content fades in (0→100% opacity) during final 150ms
Collapse	duration-base	ease-standard	Height animates closed; content fades out (100→0% opacity) during initial 100ms

Success Toast

Slug: success-toast

Phase	Duration	Easing	Behavior
Entry	duration-base	ease-entrance	Slides in from the bottom
Hold	delay-long (500ms as token; 4000ms total hold)	—	Settle time after entry completes before auto-dismiss timer begins
Exit	duration-fast	ease-exit	Fades out quickly

The "Anchor" Motion — Dropdowns, Popovers, and Tooltips

Slug: anchor-motion

Phase	Duration	Easing	Behavior
Open	duration-base	ease-entrance	Fades in (0→100% opacity) over full duration; element scales up from its trigger point while fading in
Close	duration-fast	ease-standard	Fades out (100→0% opacity) over full duration; element scales down and retracts back to its trigger point

Layered Overlays — Modals

Slug: layered-overlays-modals

Phase	Duration	Easing	Behavior
Open	duration-slow	ease-entrance	Modal scales 95%→100% while background scrim fades in. The slow duration communicates that the user has entered a new, temporary top-level context.
Close	duration-fast	ease-exit	Modal scales 100%→95% and fades 100%→0%. Scrim fades 100%→0%, synchronized. Slower on open to help users track context; dismisses quickly once the decision is made.

Skeleton Loading

Slug: skeleton-loading

Duration	Easing	Behavior
2000ms (looping)	linear	A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views.

Staggered Entrance — Lists, Table Rows, Search Cards

Slug: staggered-entrance

Per-item duration	Easing	Delay per item
duration-fast	ease-entrance	delay-stagger × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)

State Transitions

Slug: state-transitions

State	Duration	Easing	Behavior
Hover	duration-instant	ease-standard	Subtle background color shift via brightness filter
Focus	—	—	No motion tokens — instant high-contrast ring/border for accessibility and speed
Pressed	duration-instant	ease-exit	Subtle scale or brightness darkening
→ Selected	duration-fast	ease-standard	Subtle background color shift and side stroke draw-in
→ Unselected	duration-instant	ease-exit	Rapid fade and stroke collapse