Motion as a brand asset, not decoration
Easing curves, duration scales and choreography defined once at brand level, shipped as tokens, and bounded by the accessibility rules that govern animation. What a motion system contains and how it gets maintained.
Contents
Motion becomes a brand asset when easing curves, the duration scale and choreography rules are defined once, documented, and shipped as tokens every component reads. Defined per screen, it is decoration and decays within two releases. The system also carries the accessibility rules, because animation has a documented health consequence.
Key takeaways
- WCAG Success Criterion 2.3.3 requires motion animation triggered by interaction to be disableable unless the animation is essential (W3C).
- Success Criterion 2.2.2, a Level A requirement, applies to anything that moves automatically for more than five seconds alongside other content (W3C).
- About 15% of American adults, some 33 million people, had a balance or dizziness problem in 2008 (NIDCD).
prefers-reduced-motionwas the most used user-preference media query in the 2022 Web Almanac, appearing on 34% of pages (HTTP Archive, 26 September 2022).
What a motion system contains
Four things, and none is an animation. A duration scale, usually three to five steps from a short state change to a long view transition. A small set of named easing curves. A choreography rule that says what leads and what follows. And a list of what is never animated.
That last item does the most work. Without it, motion accumulates: someone animates a validation error, someone else animates the price, and the interface starts shouting in several directions at once.
The system is a brand asset in the sense a typeface is. It is recognizable across products, applied rather than reinvented, and it accumulates value only if it stays constant — the same logic that governs a mark.
Easing and duration belong to the brand
Easing describes how a value changes over time. CSS Easing Functions Level 1 defines the families available: linear, cubic Bézier curves including the ease keywords and cubic-bezier(), and step functions. A brand picks two or three from that space and names them.
The naming is the point. motion-ease-exit and motion-duration-medium are decisions a design system can enforce; a raw cubic-bezier(0.2, 0, 0, 1) pasted into a component is a decision nobody can audit. This is exactly the contract design tokens exist to hold.
Duration follows scale and distance. Small elements moving short distances need less time than a full-view transition, and one duration for both makes one feel sluggish and the other abrupt. Set the scale, then let components pick a step.
Choreography decides what the interface means
Choreography is the order of arrival. When several elements enter at once, the eye reads them as one block; in sequence, the order tells the user what is primary. That is a hierarchy decision, and it belongs with the people who set hierarchy elsewhere in the identity.
Two rules cover most cases. Motion should follow the causal path — an element that opens from a button expands from that button, not from the center of the screen. And offsets between staggered items stay small, because a long stagger reads as slowness rather than as rhythm.
The accessibility obligation
Animation is not a neutral aesthetic choice. Vestibular disorders can produce dizziness, nausea and headaches in response to large-scale movement, parallax and mismatched motion, and the affected population is not small.
The National Institute on Deafness and Other Communication Disorders reports that about 15% of American adults — some 33 million people — had a balance or dizziness problem in 2008. Vestibular reactions to on-screen motion include dizziness, nausea and headaches. Source: NIDCD.
Two success criteria bound this. SC 2.2.2, Pause, Stop, Hide, is Level A: anything that moves, blinks or scrolls automatically, lasts more than five seconds and sits alongside other content needs a mechanism to pause, stop or hide it. SC 2.3.3, Animation from Interactions, is Level AAA and requires that interaction-triggered motion animation can be disabled unless it is essential.
WCAG Success Criterion 2.3.3 states that motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed. The W3C's guidance points to the prefers-reduced-motion media query as the implementation route. Source: W3C Web Accessibility Initiative.The media query maps to an operating system setting that predates the web standard: WebKit shipped support in 2017, mapping to the Reduce Motion accessibility toggle introduced in iOS 7 and later on macOS. By 2022 it was the most used user-preference media query on the web, at 34% of pages.
Reduced motion is not zero motion. Opacity changes, short crossfades and instant state changes still communicate. What gets removed is translation over distance, scale, parallax and spin.
Shipping it so it survives
Ship the system as tokens plus a written rule set, not as a video. The tokens go into the codebase; the rules go into the same document that carries type and color, and they name who approves an exception.
Then measure the cost. Animation runs on the same frame budget as everything else, and heavy motion shows up in the metrics teams already watch for loading and interaction performance. Motion that ships without a performance check gets deleted by whoever is on call, not redesigned.
FAQ
Is `prefers-reduced-motion` enough to meet WCAG?
It is the main technique, not the whole answer. SC 2.3.3 asks that interaction-triggered motion can be disabled; honoring the media query does that for users who have set the preference. SC 2.2.2 still requires a pause, stop or hide control for automatic movement lasting over five seconds.
How many easing curves should a brand define?
Two or three. One for elements entering, one for elements leaving, and optionally one for large view transitions. More than that and components start choosing by taste rather than by rule, which is how a documented system quietly stops being a system.
Does motion belong to design or engineering?
Both, at different layers. The curves, durations and choreography rules are brand decisions, documented like typography and owned by design. Their implementation, the performance budget and the reduced-motion fallbacks are engineering decisions, and neither side can specify the other's layer alone.
What to do next
Define the duration scale and the easing set before animating anything, write the list of things that are never animated, and implement the reduced-motion path in the same commit as the animation rather than in a later accessibility pass. Then look at the pages where motion already exists and check them against SC 2.2.2, because automatic carousels and hero loops are where most sites already fail. In six months the useful question is how many exceptions were requested, and whether the rules survived them.
