Motion

Motion

Motion is communication. Every animation answers one of three questions — what just happened? (feedback), where did it go? (orientation), or is this alive? (character). Animation that answers none of them is decoration on a delay; delete it rather than tune it.

The rule that makes this skill different from reading about animation: you cannot judge motion from source code, and you cannot judge it from a still. Run it, capture it, watch it. There is a script here that does exactly that.

Workflow

1. Name the question. Feedback, orientation, or character — and what the motion

temperament is (snappy or viscous, calm or nervous). One line is enough. If the project has a design philosophy from design-direction, take the temperament from there.

1. Start from a recipe, not from scratch. Find the pattern in the recipe files below;

they carry tuned values, per-stack code, reduced-motion variants, and the failure mode for each. Adapt the values to your temperament rather than inventing timings.

1. Implement with curves and springs from

[references/easing-and-springs.md](references/easing-and-springs.md).

1. Watch it. Capture the running animation and look at the result:

``bash ./scripts/capture-motion.py index.html --out motion.gif \ --trigger "document.querySelector('#open').click()" --duration 1200 `` It records real composited frames over the DevTools protocol, so it works for CSS, Web Animations, GSAP/Framer, canvas, and WebGL alike. For native or engine work, use the platform's own capture (simulator recording, engine profiler playback).

1. Diagnose if it underwhelms — work

[references/dead-motion-diagnostic.md](references/dead-motion-diagnostic.md) in order before touching values, then re-capture. The first render of a fix is a hypothesis.

1. Check the frame cost with the performance-craft skill, and confirm the

reduced-motion path is complete and calm — not merely disabled.

Which reference to load

| Situation | Load | |---|---| | Modal, drawer, dropdown, toast, accordion, tabs, list reorder, drag, ticker, hover/press | references/recipes-interface.md | | Route/page transitions, shared elements, scroll reveals, parallax, skeletons, progress | references/recipes-transitions.md | | Particles, screen shake, hit-stop, springs in a game loop, ambient/generative fields | references/recipes-procedural.md | | Choosing a curve, spring tuning, staggers, interruption | references/easing-and-springs.md | | The 12 principles, duration standards, game feel, accessibility floor | references/principles.md | | It exists but feels dead / floaty / cheap / janky | references/dead-motion-diagnostic.md |

Non-negotiables

• Nothing moves without a reason. Name the question it answers or cut it.
• Durations from the weight scale: micro 100–150ms, small 150–250, medium 250–400,

large 400–600. Exits ~20% faster than entrances. Nothing over 700ms without a reason.

• No linear easing on anything an eye follows. Enter fast-and-decelerate, exit

accelerate-and-gone. Linear is honest only for machine progress (determinate bars).

• Animate compositor-friendly properties (transform, opacity, and platform equivalents).

Layout properties — top, height, width, margin — get FLIPped, not animated.

• Every entrance has an exit, and every animation survives being interrupted mid-flight.
• Delta-time everywhere; never assume 60fps. ProMotion and 144Hz displays are common.
• prefers-reduced-motion (and platform equivalents) is part of done, not a follow-up:

keep opacity and colour feedback, drop travel, scale, parallax, shake, and ambient.

• Scarcity is what makes the good animation land. One excellent motion beats six

mediocre ones, and a still page with one great transition beats a page that breathes everywhere.

Source & license

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

• Author: jangles-byte
• Source: jangles-byte/atelier
• License: MIT

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