Motion Principles
Decide how something should move so it feels right — independent of the tool used to build it. This skill answers timing, easing, spacing, weight, and rhythm. It does not pick a tech stack; it produces concrete numbers (durations, cubic-bezier curves, stagger offsets, spring configs) ready to hand to any implementation.
When to use
- Motion feels stiff, floaty, mechanical, robotic, or cheap and needs diagnosis.
- Choosing a clip or transition's duration, easing curve, and stagger offset.
- Reviewing whether motion respects physics intuition (weight, follow-through, arcs).
- Synchronizing keyframes to a musical beat or edit accent.
Three pillars — settle these before any number
Every piece of motion should answer three questions before you pick a duration or curve. Skip them and you get technically-correct motion that feels like nothing. These are the shared vocabulary the rest of the collection refers back to.
| Pillar | The question | What it drives |
|---|---|---|
| Emotional intent | What should the viewer feel? (joy, calm, urgency, trust, elegance) | Easing, duration, amplitude/overshoot |
| Visual narrative | What's the micro-story? Setup → action → resolution | Sequencing, staging, what enters when |
| Motion craft | How do we make it believable? | Physics, secondary motion, arcs, follow-through |
Three motion layers — depth, not flatness
Flat motion = only the main thing moves. Believable motion runs three layers at once:
- Primary — the main action the eye follows (the hero move).
- Secondary — supporting richness reacting to the primary (a shadow shifting, an icon nudging, a label settling late).
- Ambient — background life that never demands attention (slow gradient drift, a low-contrast pulse).
The judgment layer (
motion-art-direction) calls these Hero / Support / Texture — same three layers, ranked for what earns motion. Primary≈Hero, Secondary≈Support, Ambient≈Texture.
Core principles
Easing is the single biggest lever
Linear motion reads as robotic. Reserve linear for continuous loops (spinners, marquees, infinite scroll) only. Everything an eye perceives as a discrete event needs acceleration.
Match the curve to the action:
- Enter / appear -> ease-out (fast start, gentle settle). Object arrives with energy and decelerates into place.
cubic-bezier(0.16, 1, 0.3, 1). - Exit / disappear -> ease-in (gentle start, fast end). Object accelerates away.
cubic-bezier(0.7, 0, 0.84, 0). - Move / reposition (stays on screen) -> ease-in-out (symmetric).
cubic-bezier(0.65, 0, 0.35, 1). - Playful / branded -> slight overshoot.
cubic-bezier(0.34, 1.56, 0.64, 1)(the1.56pushes past 1.0, creating an overshoot-and-settle that reads as "weight").
Rule of thumb: the eye forgives a slow start far less than a slow end. When in doubt, decelerate into rest.
Hand-shaping easing (After Effects). When keyframing by hand rather than supplying a curve, the same principles map to the Graph Editor: shape the Speed Graph so the ends flatten toward zero, and push deceleration influence to 80–90% for a snappy launch and smooth settle. F9 (Easy Ease) is only a 33% symmetric starting point — make it asymmetric. See references/easing-graph-editor.md for Graph Editor reading, handle/influence techniques, and step-by-step overshoot, anticipation, and bounce recipes (including a decaying-bounce expression).
Timing communicates weight and importance
| Element | Duration |
|---|---|
| Micro-interaction (hover, toggle, tap feedback) | 100-200ms |
| UI transition (panel, modal, page region) | 200-400ms |
| Hero / large element / full-screen | 400-800ms |
| Cinematic camera move | 800-2000ms |
Distance and size scale duration. A small icon moving 20px and a full-bleed panel moving 800px should NOT share a duration — the panel needs more time or it looks weightless. A practical scaling: keep perceived velocity roughly constant by adding ~30-50% duration when distance or area roughly doubles. Heavy objects start slowly and overshoot less; light objects snap and may bounce.
Spacing and stagger create rhythm
Never reveal a list, grid, or group all at once — it reads as a single flat event. Stagger each child's start.
- Lists / sequential items: 40-80ms between items.
- Dense grids: 20-40ms (more items, less per-item delay, or the tail drags).
- Cap total reveal at roughly 600-800ms for a group; if
count * offsetexceeds that, shrink the offset or switch to a distance-based stagger (items further from an origin point start later). - Stagger direction should follow the eye: top-to-bottom, or radiating from a focal point.
The 1/3 Rule (two forms, both universal):
- Distance — no element travels more than ~1/3 of the screen without an intermediate keyframe or a scale/opacity change. Long unbroken slides read as "the template moved," not "something happened."
- Simultaneity — with 3+ elements, keep no more than ~1/3 in active motion at once. The rest hold or move as ambient. Everything moving together = noise with no focal point.
Anticipation and follow-through sell physical motion
- Anticipation: a tiny counter-move before the main action (a button dips
scale 0.95before popping, a character crouches before jumping). 60-120ms is enough. - Follow-through / overlapping action: trailing parts keep moving after the main body stops (a hero card lands, then its shadow and label settle 40-80ms later). Stagger the settle of attached elements rather than stopping everything on the same frame.
- Arcs: natural movement curves; pure straight-line translation of an organic object looks mechanical. Add a slight arc to x/y or animate a path.
Beat-sync and rhythm
When motion accompanies audio, land impact keyframes (a hit, a cut, a reveal) on the beat, not between beats. At 120 BPM a beat is 500ms; an eighth-note grid is 250ms. Quantize key moments to that grid. For edits without music, establish a visual pulse (e.g. one major event per ~500-800ms) so the piece breathes consistently.
Spring vs. duration-based motion
Springs (mass / stiffness / damping) self-determine duration and feel more physical for interactive, interruptible motion (drag-release, gestures). Duration+easing is better for choreographed, timeline-locked sequences (video, scroll-tied reveals) where exact sync matters. A snappy default spring: stiffness 300, damping 30, mass 1. See references/easing-curves.md for a full spring table.
Diagnosing common failures
- Feels stiff/robotic -> using
linearor symmetric easing on an enter; switch to ease-out. - Feels floaty/sluggish -> duration too long or ease-out too gentle; cut duration 30%, sharpen the curve.
- Feels cheap/janky -> everything appears at once (no stagger), or all elements share one duration regardless of size.
- Feels mechanical despite easing -> no anticipation, no follow-through, straight-line paths; add arcs and overlap.
Quick reference
| Need | Use |
|---|---|
| Enter | cubic-bezier(0.16, 1, 0.3, 1), 300-500ms |
| Exit | cubic-bezier(0.7, 0, 0.84, 0), 200-300ms |
| Move | cubic-bezier(0.65, 0, 0.35, 1), 300-400ms |
| Branded pop | cubic-bezier(0.34, 1.56, 0.64, 1), 400-600ms |
| List stagger | 40-80ms per item, cap ~700ms total |
| Loop only | linear |
Reference files
references/easing-curves.md— named cubic-bezier library with exact values, spring configs (Framer/react-spring/iOS), and per-element-type duration guidance.references/easing-graph-editor.md— After Effects Graph Editor craft: speed graph vs value graph, easing handles and influence/velocity numbers, and step-by-step snappy, overshoot, anticipation, and bounce recipes.references/twelve-principles.md— all 12 Disney principles, each with a concrete, numeric motion-graphics example.
