Motion Art Direction

Motion Direction

Make the creative decisions for a motion piece before anyone animates a frame. Direction is the judgment layer: it turns a brief and a brand into a small, repeatable set of motion rules — one easing vocabulary, one timing scale, one transition family — so every shot feels like it came from the same hand. Good direction is mostly subtraction: deciding what NOT to move.

When to use

• Starting any piece — explainer, launch film, UI demo, data story, loop — and the look/feel isn't decided yet.
• Animation feels "busy", "cheap", or "inconsistent" and the cause is decisions, not craft.
• Orchestrating other skills (gsap/lottie/shader/three.js): direction sets the rules they execute.
• Translating a brand or brief into directable, written choices a team (or an agent) can follow.

The one rule

Define the motion language first, then animate to it. A motion language is a short spec — pick one of each: easing family, base timing unit, transition family, stagger rhythm, motion intensity. Everything in the piece obeys it. Consistency reads as confidence; variety reads as noise. When in doubt, reuse, don't invent.

Direction workflow

| Step | Decision | Output | |---|---|---| | 1. Brief | Audience, one message, platform, duration, mood (3 adjectives) | One-line creative intent | | 2. Tone & energy | Where it sits on calm↔kinetic and soft↔sharp | A point on the matrix below | | 3. Motion language | Lock the spec table | The motion-language spec (filled) | | 4. Hierarchy | Rank what moves: hero / support / texture | Motion hierarchy list | | 5. Restraint pass | Cut motion that doesn't carry meaning | List of what stays static | | 6. Shot direction | Note intent per shot, not keyframes | Direction notes (see template) | | 7. Consistency check | Audit against the spec | Pass/fail per shot |

Tone & energy matrix

Place the piece on two axes; the cell dictates the motion language defaults.

| | Soft (organic, eased) | Sharp (precise, snappy) | |---|---|---| | Calm | Luxury, wellness, editorial — slow, long eases, generous holds, minimal stagger | Premium tech, fintech — deliberate, clean linear-ish moves, tight but unhurried | | Kinetic | Playful, lifestyle, kids — bouncy/overshoot, springy, loose timing | Sports, hype, gaming — fast cuts, hard snaps, aggressive overshoot on beats |

Pick one cell and commit. Mixing cells within a piece is the most common cause of "inconsistent" motion.

Motion personality (named presets)

The tone matrix tells you where the piece sits; a motion personality is the named, numeric preset you hand to whoever animates. Pick ONE per project and apply it everywhere. This is shared vocabulary — other skills (e.g. gsap-web, micro-interaction, the video packs) can just say "use the Premium personality."

| Personality | Duration | Signature easing | Overshoot | Reads as | |---|---|---|---|---| | Playful | 150–300ms | ease-out-back / cubic-bezier(0.34,1.56,0.64,1) | 10–20% | fun, bouncy, whimsical | | Premium | 350–600ms | cubic-bezier(0.4,0,0.2,1) | 0% | elegant, minimal, luxury | | Corporate | 200–400ms | cubic-bezier(0.2,0,0,1) | 0–3% | clean, professional, trustworthy | | Energetic | 100–250ms | ease-out-expo | 15–30% | bold, dynamic, hype |

Default: Corporate for UI/product, Playful for illustration/lifestyle. Maps onto the matrix — Premium≈calm-soft, Corporate≈calm-sharp, Playful≈kinetic-soft, Energetic≈kinetic-sharp. The personality fills the "easing family / base timing unit / motion intensity" rows of the spec below.

The motion-language spec

The core artifact. Fill every row with ONE choice and reuse it everywhere.

| Property | Choose one | Example (calm-sharp / premium tech) | |---|---|---| | Easing family | The signature curve for ~90% of moves | cubic-bezier(0.22, 1, 0.36, 1) (decelerate, soft landing) | | Base timing unit | The atomic duration; build others as multiples | 0.4s (enters 0.4s, big moves 0.8s, micro 0.2s) | | Transition family | How shots connect | Match-cut + crossfade only; no wipes/spins | | Stagger rhythm | Delay between grouped elements | 60ms cascade, top-to-bottom | | Motion intensity | Distance/scale/overshoot budget | Travel ≤ 24px, scale 0.96→1.0, overshoot ≤ 2% | | Hold discipline | Minimum rest between moves | ≥ 0.3s of stillness after each beat |

Two eases maximum: one "in" (exits) and one "out" (entrances/landings). A third curve must justify its existence.

Motion hierarchy

Not everything earns motion. Rank every element, then animate down the list — and stop early. These three tiers are the universal three motion layers (see animation-principles): Hero = Primary, Support = Secondary, Texture = Ambient.

| Tier | What it is | How it moves | |---|---|---| | Hero | The one thing the shot is about | Gets the boldest, slowest, most-eased move; lands on the beat | | Support | Context that helps the hero land | Smaller, faster, eased out of the way; never competes | | Texture | Background, grain, ambient drift | Subliminal only — slow loops, low contrast, no hard cuts |

If two elements compete for the eye in one frame, the direction has failed. Demote one to support.

Restraint — what NOT to animate

The senior move. For each element ask: does the motion carry meaning? If not, hold it still.

• Don't animate the entire frame at once — stagger or hold a anchor so the eye has a home.
• Don't transition the transition (no animated wipe and a spin and a fade).
• Don't loop-animate text the viewer is still reading.
• Don't add overshoot to serious/financial content — it reads as toy-like.
• One "wow" moment per piece. A second one cancels the first.

Pacing & rhythm

Pacing is the edit's heartbeat. Vary it on purpose: tension (faster, tighter) → release (a hold). Map energy across the timeline before timing individual moves — most pieces want a low-energy open, a build, a peak, and a settled end card. Cut and land key moments on the audio (see launch-video for beat-syncing); silence and stillness are pacing tools, not gaps to fill.

Consistency check

Before sign-off, audit every shot against the spec table:

• Same easing family on comparable moves? (No stray linear or ease.)
• All durations are multiples of the base unit?
• Only the chosen transition family between shots?
• Stagger rhythm identical across grouped reveals?
• Hold discipline respected — no two moves stacked without rest?
• Exactly one hero per frame?

Any "no" is a direction defect, not a craft preference — fix it before polishing.

Reference files

• references/direction-playbook.md — worked examples of the motion-language spec for five tone cells, a full brief template, a shot-by-shot direction-notes template with example entries, brand→motion translation tables, an easing-vocabulary cheat sheet, and a complete pre-render direction checklist.

Source & license

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

• Author: iart-ai
• Source: iart-ai/motion-design-skills
• License: MIT
• Homepage: https://www.iart.ai

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