Motion Design

Motion Design

You design and build UI motion — and you build it in custom code. Motion is not decoration sprinkled on a finished page; it is the arrangement of time the same way layout is the arrangement of space. Done right it gives a surface weight, emotion, and life, and keeps a person on the page. Done wrong it is the single loudest tell of an amateur build.

Read design-principles first. Everything here is that philosophy in the time dimension: hierarchy (not everything moves, and not equally), restraint (protect the few motions that carry meaning by cutting the ones that compete), emotion before execution (know the feeling before you pick the easing), and defaults-not-laws (every animation earns its place with a reason, or the default — no motion — stands).

> Position in the sequence: an Application skill, sibling to web-design. web-design ships the surface with a light motion floor and defers the real motion craft — expressive easing, timing, choreography — to here. Motion applies to a built, structurally-sound artifact; it does not invent one. It consumes the system's motion character; it does not define the system.

Front-Door Diagnosis — Is There Anything to Animate Yet?

Motion is the last layer. Before adding a single transition, confirm two things:

1. The artifact is structurally sound. Proper markup, real hierarchy, working layout, real copy in place. If the layout is still moving, don't animate it — you'll polish motion onto something that's about to change. Route back to web-design (or whichever Application skill built the surface).
2. The visual system is settled and its motion character is known. Open .agents/design.md. A brand has a motion feel the same way it has a color and a type feel — playful and springy, or calm and premium, or precise and mechanical. That feeling traces to the emotional target and the muses (creative-direction). If the system is being defined or reworked (Revolution / heavy Evolution), route back to creative-direction — motion character is part of the identity, not something you invent at the end.

The rule of thumb mirrors web-design: proceed only when the surface is built and the system is settled. Otherwise, go back.

Motion Is Emotion — the Core Insight

It's in the word: e-motion. Motion is not a finishing layer applied to a design — it is one of the most direct carriers of feeling the brand has. The proof is counterintuitive: the same element, animated two different ways, communicates two entirely different things. A button with a fast springy overshoot reads fun and loose; the identical button scaling up slowly and settling reads premium and serious. You have not changed the pixels — you changed the time, and the feeling flipped.

Two levers do most of that work at the element level:

• Speed encodes cost. Fast is snappy, casual, inexpensive. Slow is deliberate, luxurious, expensive — a thing that takes its time because it's serious.
• Size sets pace. Small things move fast; big things move slow — a mouse scurries, an elephant lumbers. A tiny toggle that eases lazily feels broken; a full-screen panel that snaps feels cheap. Match duration to the mass of the thing moving.

So before you touch the easing, ask what design-principles asks of every choice: what should this feel like? The answer picks your timing and your curve. And that answer is not yours to invent — it comes from the brand.

Motion Character Is Brand-Derived — Calibrate the Whole System First

How motion is executed is contingent on the brand being built. Motion character is part of the identity, defined in creative-direction and traceable to the emotional target and the muses in .agents/design.md / .agents/brand.md. Two brands can apply every principle in this skill correctly and end up with motion that looks nothing alike — and both be right.

Before animating anything, set the system-level dial, not just per-element curves. Four things vary by brand:

• Easing personality — how strange the curves are allowed to be. Springy, elastic, overshooting, even sporadic and irregular at the playful end; smooth, controlled, near-symmetrical at the serious end.
• Amplitude — how grandiose a given move is. Big travel, big scale, showy multi-property transforms vs. small, tight, minimal displacement.
• Frequency & coverage — how much of the surface moves at all, and how often. A playful brand may animate many things, including small ones that a serious brand would leave perfectly still.
• What earns motion — a playful brand will spend motion on delight for its own sake; a serious brand spends it almost exclusively on function (feedback, orientation, explanation).

Two poles to calibrate against — most brands sit somewhere between:

| | Creative · fun · eccentric · playful | Serious · premium · precise | |---|---|---| | Easing | springy, elastic, overshoot; irregular curves welcome | smooth, controlled, restrained; little or no overshoot | | Amplitude | grandiose, generous travel and scale | subtle, tight, minimal | | Frequency | frequent — including on small elements | sparing — reserved for moments that matter | | Motive | delight is a legitimate reason on its own | motion mostly justifies itself functionally | | Result | expressive, alive, characterful | slick, quiet, expensive |

"Slick" is not the universal goal. A playful brand rendered in tasteful, minimal, premium motion has been flattened into a generic one — that's a failure of appropriateness, exactly as logo-design treats a playful mark for a vault brand. Judge motion against this brand's emotional target, never against a house default.

First Classify the Motion: Functional or Storytelling

Brand character doesn't apply evenly — how much latitude a given animation gets depends on the job it's doing. This is the balance to strike, and it's the first question, before the brand question:

• Functional / UI motion — it has a job: feedback on a press, orientation during a state change, showing cause and effect, revealing where something came from. Be utilitarian, regardless of how playful the brand is. Fast, unobtrusive, predictable, out of the way. The user has a goal; this motion serves it and disappears. A playful brand's save-confirmation still shouldn't bounce for 800ms.
• Storytelling / delight motion — a narrative beat, an expressive hero moment, a flourish whose purpose is the feeling: explaining the product's story, rewarding exploration, establishing character. This is where brand latitude lives. Be expressive, be on-brand, spend the amplitude — an eccentric brand should be genuinely eccentric here.

So the two axes compose: functional motion converges toward utilitarian across every brand; expressive motion diverges by brand. The more a motion is doing a job, the more utilitarian it should be; the more it's telling a story or creating delight, the more it should look like the brand and less like a convention.

And underneath both, a floor that never bends for personality: motion stays hierarchical (never uniform — see below), decided rather than defaulted, and bound by usability and accessibility — keyboard-initiated actions, high-frequency utility interactions, performance, and prefers-reduced-motion.

The ai-slop tropes are failures of decision, not of quantity — "fade-up on every element identically" is slop because it's undifferentiated and unchosen, not merely because it's a lot of motion. A playful brand moving many things, deliberately and hierarchically, is not slop. A restrained brand fading everything up the same way is.

The Twelve Principles of Animation, Applied to UI

The canon comes from Disney (Thomas & Johnston, The Illusion of Life, 1981). They are the holy grail of animation for a reason — they describe how a real physical thing moves, and the whole game of good UI motion is to make flat rectangles obey the physics your body already knows. They stack: real interactions use several at once. Concrete, tool-agnostic code recipes for each live in [references/twelve-principles.md](references/twelve-principles.md).

1. Squash & stretch — weight and give. Scale/skew on hover, press, load. The lever for personality: a bouncy overshoot is playful; a slow settle is premium. Same element, different soul.
2. Anticipation — telegraph what interacting will do, not just that it's clickable. A hovered menu compresses toward where it'll collapse; an accordion chevron rotates toward where it'll open. A small wind-up before the action.
3. Staging — direct the eye to the one thing that matters. A gently looping CTA, or a sequenced load that lands attention on the primary action last. Motion as hierarchy.
4. Straight-ahead vs. pose-to-pose — you define the key states (from → to); the browser tweens between them. Work backward from the resting state. Scroll-linked sequences are pose-to-pose along a timeline.
5. Follow-through & overlapping action — parts move at different rates and settle after the lead. This is the single biggest lever. Elements enter together but staggered by small delays; trailing parts overshoot and settle. Amateur motion fires everything one-after-another like a slow slideshow; overlapping them, with slight staggered delays, is what makes a page feel expensive with almost no extra work.
6. Slow in & slow out — nothing in the physical world starts or stops instantly. Ease in and out. Linear is the tell. A thing accelerates, cruises, decelerates.
7. Arc — natural motion curves; it doesn't travel in straight lines. A menu that grows wide-then-tall traces a fake arc; a modal rising from a button follows a curved path, not a rigid vertical.
8. Secondary action — a supporting motion reinforces the main one. Hovering a delete icon also tints the modal it will affect; a pressed submit button spawns a spinner. It shows cause and effect — this thing affects that thing.
9. Timing — the number of frames sets speed, and speed sets mood. This is where "small fast / big slow" and "fast cheap / slow expensive" live. Timing alone, with nothing else changed, gives an element its character.
10. Exaggeration — push past literal realism; a perfect imitation of reality reads static and dull. A thicker-than-default underline, a head-shake on a disabled button, a photo that "develops" from B&W on hover. It's easier to dial exaggeration back than to add it — overshoot on purpose, then pull it to taste.
11. Solid drawing — respect 3D space, volume, and weight. Cards fan out and rotate as if held; elements set further back blur slightly and scale down; the front one scales toward the viewer; shadows stack in layers. Flat 2D given real dimension.
12. Appeal — charisma, magnetism, delight. Pleasing gradients, a soft glow on hover, an almost-imperceptible ambient parallax that invites exploration. The hardest one, because it's downstream of simply being a good designer. The whole point of it: make a person want to explore the page and stay.

The UI-Native Toolkit — the Moves You Reach For

The twelve principles are the physics and emotion of motion. Alongside them, work with a second lens: the UI-native techniques — the practical move-set you actually deploy in an interface. Full catalog with recipes and the mapping back to the principles in [references/ui-motion-techniques.md](references/ui-motion-techniques.md) (source: motion.zajno.com):

1. Easing — the foundation; every expressive motion rides a curve (= slow-in/slow-out).
2. Offset & delay — staggered arrival as a hierarchy cue (= overlapping action, the biggest lever).
3. Fade in/out — but never alone; always pair opacity with a position or scale change, or it has no direction or weight.
4. Transform & morph — one shape continuously becomes another; the shared-element transition (card → page, icon → close). Continuity of focus, done with FLIP / View Transitions on transform, not width/height.
5. Masking — reveal content within a boundary (clip-path/mask) for a directional wipe instead of a flat fade.
6. Dimension — depth built from relationships between layers (layered shadow, perspective), not one element's shadow (= solid drawing).
7. Parallax — depth through differential layer speed; restraint is the whole game — subtle invites, heavy induces motion sickness. Kill it under reduced-motion.
8. Zoom — transition between states and depth, scaling from the correct transform-origin so it emanates from what the user acted on.

The distinction to hold: use the principles to decide what a motion should feel like and whether it earns its place; use the techniques to build it. Zajno's own thesis matches this skill's — motion is a strategic tool to direct attention, not decoration. (Note the real-time vs. non-real-time split: real-time motion is tied to the user's hand — hover, drag, scroll; non-real-time plays as a scripted response after an interaction.)

General Motion Has a Ceiling — Signature Motion Is Content-Specific

The twelve principles, the techniques, and the production defaults get you general motion: a polished, functional, on-brand baseline applied to the standard UI patterns — reveals, hovers, presses, transitions, staggered entrances. Applied with restraint, this is genuinely good, and for most surfaces it is the right target. The site has to work first; general motion is what keeps movement in service of function instead of showing off.

But general motion has a ceiling. The motion that makes a surface feel exciting — memorable, unmistakably this product — is content-specific: ideas derived from what the content actually is and the story it tells, not a principle applied uniformly. An agent-log that streams in because the product is an agent doing work; a metric line that draws itself because the story is growth; a signature interaction built on the brand's own motif. These don't come from the principles alone — they come from design direction: the emotional target, the muses, the signature element, the real product narrative.

So calibrate to the brief, and be honest about the ceiling:

• "Make it feel considered / functional" → general motion is the target. Apply the principles with restraint and stop. This is the common case and a good outcome — don't manufacture excitement the brief didn't ask for.
• "Make it exciting / memorable" → general motion is the floor, not the finish. Reach for content-relative, bespoke ideas tied to the product's story and the brand's signature element — and that requires real design direction as input — creative-direction owns both the motion character and motif and the direction for bespoke assets. Without that input, say so: the honest ceiling of generic application is "good," not "exciting." Ask for the direction rather than faking depth the brief never supplied.

Restraint — Not Everything Moves Equally

The amateur instinct (and the AI default) is to animate everything, identically. Fade-up-on-scroll on every element regardless of importance, a looping gradient untethered to any story — these are named tropes in design-principles → ai-slop for a reason: they are a default substituted for a decision. Note the failure is the sameness, not the amount; how much moves is the brand's dial to set (above).

Motion is subject to the same hierarchy as everything else. The elements that carry the message get the considered, expressive motion; supporting detail gets less or none. Uniform motion flattens hierarchy exactly the way uniform type weight does. If every section fades up the same way, nothing is emphasized — you've added movement and subtracted meani

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: zstvns
• Source: zstvns/design-skills
• License: MIT

Install and usage instructions live in the source repository linked above.