Motion Has Meaning. Most Design Systems Pretend It Doesn't.
Every designer reaches for easing curves without being able to say what they mean. The animation looks polished. The stakeholder says it feels premium. Nobody in the room can explain what it's communicating.
That gap — between aesthetic fluency and semantic clarity — is where a lot of UI motion quietly fails.
What We Inherited From Disney
The principles most motion designers cite as foundational were codified in 1981. Ollie Johnston and Frank Thomas published The Illusion of Life, describing twelve principles that Disney animators had developed over decades: squash and stretch, anticipation, follow-through, staging, and seven others. These principles make animated characters feel physically plausible and emotionally legible.
They were designed for film. Specifically, for the problem of making hand-drawn characters move in ways that felt alive rather than mechanical. They describe how to move — with what physical logic, what implied weight, what organic rhythm. They don't describe what movement means. They don't address causality, hierarchy, or the relationship between a user's action and a system's response.
UI animation adopted these principles wholesale and largely without modification. The result is a generation of interfaces that move convincingly but communicate inconsistently. An interface can have beautiful easing and still leave users uncertain about whether their tap registered, whether the element that appeared is related to what they just did, or whether they can reverse what just happened.
Timing as Signal
There's a distinction that rarely gets written down in design documentation but gets internalized immediately by users: the difference between a system responding to the user versus a system acting on the user.
Ease-out timing — fast-in, slow-out — reads as response. The element comes in with energy that decelerates as it settles. This temporal pattern matches the physics of something reacting to a force (you) and coming to rest. Ease-in timing — slow-in, fast-out — reads as initiation. The element builds momentum as it moves. It feels like something starting of its own accord.
These aren't aesthetic options. They encode the direction of agency. A notification that slides in with ease-out implies it's responding to something — which creates a subtle but real confusion when nothing preceded it. A button press that produces an ease-in response implies the system is initiating, not reacting. The cognitive friction is small. Multiplied across an interface used dozens of times per day, it produces a feeling that the interface is slightly unpredictable, without users being able to articulate why.
The problem isn't that designers make the wrong choice consciously. It's that most design systems don't specify timing at the level of meaning, so the choice gets made based on what looks good in isolation, without considering what it signals in context.
Spatial Logic
Where an element comes from encodes where it lives in the hierarchy.
A menu that drops from above implies it's a child of the navigation layer — subordinate, associated with the triggering element. A sheet that slides up from the bottom implies it's a layer below the current content, something being pulled up. A modal that appears from the center of the screen with a scale-up implies it's a focused child of the current view. Lateral entry — sliding in from the left or right — implies sibling relationship, parallel navigation at the same level.
None of this is formally standardized. But users build mental models of spatial logic from repeated exposure to interfaces that apply it consistently. When a modal fades in from nowhere — appearing without a directional cue — it exists outside the interface's implied geography. It breaks a grammar rule that nobody wrote down, in a language the user didn't know they were reading.
The progressive disclosure problem is closely related: when content appears without spatial context, users don't know where to place it in their mental model of the interface. Motion that carries spatial logic solves the ambiguity before it can form.
The Consistency Problem Inside Design Systems
Most mature design systems specify visual tokens with precision. Color values to the hex digit. Spacing in four-point increments. Typography scales with exact ratios. Then motion gets described in a paragraph.
"Our animations feel smooth and intentional, reflecting our brand's sense of ease and confidence."
This is aesthetic guidance, not specification. Two engineers implementing "smooth and intentional" will produce animations with different timing curves, different durations, different spatial origins. That variance erodes the implicit grammar before it can solidify into something users can learn. One part of the app slides in from the right; another part fades; a third scales up. All smooth. All different signals.
Compare this to how a mature design system handles icon consistency: every icon in the library follows the same stroke weight, the same corner radius, the same pixel grid. No room for "whatever the engineer thinks looks right." Motion deserves the same treatment. Duration tokens — not "medium" or "fast" but 150ms, 300ms, 500ms. Easing presets — not "ease-in-out" but named semantic roles: motion.respond, motion.initiate, motion.reveal. Spatial entry conventions by element type.
The Semantic Layer Designers Are Skipping
Motion isn't decoration. It's the interface's most direct channel for communicating three things: what caused what, what relates to what, and what the user can do next.
A well-designed visual animation communicates causality (the button press produced this result), hierarchy (this sheet is a child of the card below it), and reversibility (the slide direction tells you how to go back). These are functional, semantic statements. They reduce cognitive load. They make the interface learnable faster because the grammar is consistent enough to generalize.
A poorly designed animation communicates nothing — or, worse, contradicts itself. Fast easing on an initiating action. An element entering from the wrong spatial region. A duration too short to register as deliberate, too long to feel responsive. Each of these is a broken sentence in a language the user is trying to read.
The field has gotten fluent in animation aesthetics without building a grammar. That's partly a tooling problem — design tools make it easy to animate anything and difficult to enforce consistency across an entire system. But it's mostly a conceptual problem. Motion gets treated as the polish layer, applied after the structural design is done, rather than as a structural layer in itself.
What a Motion Grammar Requires
A motion grammar doesn't need to be complicated. It needs to be intentional and documented at the level of meaning, not just appearance.
That means: a defined vocabulary of timing roles with semantic labels. A defined set of spatial entry patterns and what hierarchical relationship each encodes. A rule for when motion carries spatial information versus when it's contextual (appearing in place). A specified duration scale that's short enough to feel responsive and long enough to be legible.
It means being able to answer, for every animated element in the interface: what is this motion communicating? If the answer is "it looks good," the grammar isn't there yet.
Style guides document aesthetics. Grammars specify meaning. The difference between the two is whether you can explain what each choice says — not just that it feels right.
Photo by ROMAN ODINTSOV via Pexels.