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
Tone & energy matrix
Place the piece on two axes; the cell dictates the motion language defaults.
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."
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.
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.
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
linearorease.) - 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.
