Guide

How to build a motion system: duration, easing & design tokens

A motion system is the small set of timing decisions behind everything that moves in an interface — how long things take, how they accelerate, how a list staggers. This guide walks through building one as reusable design tokens, so animation stays consistent instead of being guessed per component. You can build every step of it in Cadence.

1. Start with primitives: a duration ladder and an easing set

Primitives are the raw vocabulary — general and component-agnostic. Define a short duration ladder (a handful of steps, not a dozen) and a small easing set. Everything else references these, so the whole system moves in proportion.

/* duration ladder — a lean, legible scale */
--dur-1: 100ms;  --dur-2: 150ms;  --dur-3: 200ms;
--dur-4: 300ms;  --dur-5: 500ms;

/* easing set — one per job, no more */
--ease-standard: cubic-bezier(.2, 0, 0, 1);
--ease-accelerate: cubic-bezier(.4, 0, 1, 1);
--ease-decelerate: cubic-bezier(0, 0, .2, 1);

Keep both scales small. Four or five durations and three or four easings is usually enough; more than that and nobody can tell them apart, which defeats the point of a system.

2. Compose semantic intents: enter, exit, move

Primitives say how much; intents say what for. An intent like enter, exit or move is composed from the primitives by reference — so when you adjust a primitive, every intent that uses it stays in proportion. This is your motion API: components reference intents, never raw numbers.

--motion-enter:  var(--dur-3) var(--ease-decelerate);  /* things arriving */
--motion-exit:   var(--dur-2) var(--ease-accelerate);  /* things leaving */
--motion-move:   var(--dur-4) var(--ease-standard);    /* things repositioning */

Notice the asymmetry: exit is quicker than enter. Leaving should feel decisive; arriving can afford to be gentle. Small, deliberate choices like this are what make motion read as designed rather than default.

3. Add stagger and distance

Two more primitives cover most list and transform work. Stagger is the delay between items in a sequence — a five-item list at a 70 ms stagger cascades over ~280 ms, brisk enough to read as one gesture. Distance is how far an element travels on enter; keep it a token too, so movement scales with the rest of the system.

4. Export as design tokens (CSS, Tailwind, Style Dictionary, JSON)

The point of tokens is that they live in code. The same system exports to whatever your stack reads:

• CSS custom properties — drop-in --motion-* variables.
• Tailwind — a theme.extend block for transitionDuration and transitionTimingFunction.
• Style Dictionary — platform-agnostic token JSON for multi-platform design systems.
• JSON / TypeScript — for anything that consumes tokens programmatically.

In Cadence the export panel emits all of these and updates live as you edit the scales, so the code always matches the system you are looking at.

5. Go further: scroll-driven animations and view transitions

A motion system isn't only transitions. The same duration and easing tokens drive newer CSS too:

• Scroll-driven animations — animation-timeline: scroll() and view() tie an animation's progress to scroll position or an element entering the viewport, no JavaScript required.
• View Transitions — the View Transitions API animates between two states (or pages) using your move timing.

Both should ship with an honest fallback for browsers that don't support them yet — Cadence emits the recipe and the fallback together.

The opinion: a system should critique itself

Structure is half the job; the other half is judgement. A good motion system flags its own problems — an easing set that's grown too large, an exit that's slower than its enter, a duration ladder with uneven steps. That built-in critique is the difference between a pile of tokens and a system with a point of view.