animation-principles

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.

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) (the 1.56 pushes 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

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 * offset exceeds 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.95 before 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 linear or 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

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.