Thinking

Motion Techniques

A shared vocabulary for describing motion. Every technique is named, coded and demonstrated live, so you can point at the exact movement you mean in a brief, a review, or a prompt.

The 12 Principles

1 · Squash & stretch

deform on impact; conserve volume

Copy prompt

2 · Anticipation

wind-up before the action

Copy prompt

3 · Staging

clear the clutter, direct the eye

Copy prompt
pose-to-pose
straight-ahead

4 · Straight-ahead vs pose-to-pose

continuous vs key poses + in-betweens

Copy prompt

5 · Follow-through & overlap

the tail settles after the body stops

Copy prompt

6 · Slow in & slow out

accelerate and decelerate (easing)

Copy prompt

7 · Arcs

natural motion follows curves

Copy prompt

8 · Secondary action

supporting motion (the swinging tail)

Copy prompt

9 · Timing

heavy is slow, light is fast

Copy prompt

10 · Exaggeration

subtle vs pushed squash

Copy prompt

11 · Solid drawing

lit volumes, real weight and silhouette

Copy prompt

12 · Appeal

charisma; satisfying to watch

Copy prompt

Timing & Easing

linear
ease-out
ease-in
ease-in-out
spring

Easing curves

linear · ease-out · ease-in · ease-in-out · spring

Copy prompt
critically damped
underdamped
overdamped

Spring damping regimes

snap · multi-bounce overshoot via CSS linear() · sluggish crawl

Copy prompt
100ms
300ms
500ms
1000ms

Duration

the same move at 100, 300, 500 and 1000ms

Copy prompt

Rhythm & pacing

quick-quick, hold, accent

Copy prompt

Physicality

Overshoot & settle

pass the target, ease back

Copy prompt

Bounce

decaying overshoots

Copy prompt

Anticipation → action → reaction

wind-up, move, recoil

Copy prompt

Weight & centre of gravity

tall mass tips about its base; light mass rights itself

Copy prompt
drag

Rubber-banding

drag past the edge; it resists and snaps back

Copy prompt

Space & Transformation

Translate / slide

spatial relationship

Copy prompt

Scale

grow-from-origin; hierarchy

Copy prompt

Rotate / skew

orientation and dynamism

Copy prompt

Morph / path interpolation

matched vertex counts interpolate continuously

Copy prompt

Dissolve / crossfade

soft state swap

Copy prompt

Wipe reveal

wipe content in and out

Copy prompt

Parallax

layers at different speeds create depth

Copy prompt

Sequencing & Choreography

Stagger

offset starts cascade

Copy prompt

Choreography

one leads, others follow

Copy prompt

Progressive disclosure

reveal complexity in layers

Copy prompt

Drawn Timing

on ones
on twos
on threes

On ones / twos / threes

frames-per-drawing sets smoothness

Copy prompt

Cycles & loops

seamless, reusable motion

Copy prompt

Held frames / moving holds

a still pose still drifts

Copy prompt

Smears / multiples / speed lines

deform on travel, ghost trails, drawn streaks

Copy prompt

Motion blur

directional blur on fast motion

Copy prompt

Camera Motion

Camera rig

crane, truck and dolly shift per depth plane; pan, tilt and zoom do not

Copy prompt

Shot types & framing

the same subject, reframed — how close you are, and from what height

Copy prompt

Camera shake

the real camera wiggles and settles after the hit

Copy prompt

Motion-Graphics Craft

Sweep

Light sweep

a bright specular band rakes across the mark

Copy prompt
Ambient

Background movement

the ground is never completely still

Copy prompt
SIGNAL
SIGNAL
SIGNAL

Twitching / jitter

random-interval displacement, not a loop

Copy prompt
Depth

3D extrusion

stacked offsets read as dimensional type

Copy prompt

Pop-on / limited animation

snap between extremes, no in-between drawings

Copy prompt

Selective animation

hold the whole figure, move one part only

Copy prompt

Kinetic Typography

Kinetic typography

type as the moving subject, staggered per character

Copy prompt
wght 400 → 700 · wdth 100 → 79

Metric-Compensated Emphasis

wght climbs while wdth pays for it, so the line never reflows

Copy prompt

Kicker

Headline

Standfirst

Hierarchy Reflow

grid row fractions interpolate; type resizes, never translates

Copy prompt

Contested Measure

three slices of one oversized word re-cut 'opsz' out of phase; the measure tears at the seams

Copy prompt
'opsz' 6 on the cut

Bridge The Cut

a held slate stack bridges hard cuts; every splice punches 'opsz'

Copy prompt

Four Formations

one word re-set four ways and cut on a steps() clock

Copy prompt

MELT

FLUX

Viscous Coalescence

an alpha-threshold blur fuses two passing words into one mass

Copy prompt

Conducted Slant

the count rides a morphing baton path; slnt stabs land on each beat

Copy prompt

Cut-Paper Lockup

hard-edged paper blocks slide on independent clocks; the pre-cut word docks into their negative space

Copy prompt

Hit Points

each collision spawns its word at the impact point, cut on steps(1) frames

Copy prompt
4×3 · 150ms clocks

Identity Sequencer

cell states flip on offset 150ms clocks; once a bar the grid snaps to the clean lockup

Copy prompt
slnt −10

Style Zone

a fixed slanted band restyles whatever scrolls through it

Copy prompt

UI & Functional Motion

Enter / exit

in from below, out above

Copy prompt

Pop-in / reveal

scale-in with overshoot

Copy prompt

Blur materialisation

opacity plus de-blur into focus

Copy prompt
click

Shared-element / continuity

the same element morphs between states

Copy prompt
click

Feedback

depress plus ripple confirms input

Copy prompt

Guidance

a pulse nudges attention

Copy prompt
click
click for delight

Delight

a rewarding burst

Copy prompt
drag

Gesture-driven

motion tracks your drag

Copy prompt
scroll drives this — keep scrolling
0%

Scroll as input

progress tied to the scroll timeline, not a clock

Copy prompt
transform · compositor
left · triggers layout

Jank / compositor-only motion

animating transform stays smooth; animating left re-lays-out each frame

Copy prompt

Scroll-Driven

build-in · build-out
pinned — scroll to scrub

Build-in / build-out

opacity plus translate on entry, reversed on exit

Copy prompt
scale + radius
pinned — scroll to scrub

Dimensional scaling

scale coupled to border-radius so the element recedes

Copy prompt
clip-path circle()
pinned — scroll to scrub

Iris reveal

circle(6%) to circle(75%) bursts open from the centre

Copy prompt
pinned — scroll to scrub

Parallax depth scalar

a depth scalar per layer: near travels furthest

Copy prompt
DEPTH DEPTH DEPTH DEPTH DEPTH
pinned — scroll to scrub

Volumetric 3D layers

preserve-3d stacking on the Z-axis, no WebGL

Copy prompt
animation-range
entrycontainexit
playhead follows this frame
pinned — scroll to scrub

Range phases

entry · contain · exit — which slice of the pass drives the animation

Copy prompt
scroll(root) — whole document
tracks the whole page, not this frame

Scroll progress timeline

document position, independent of any one element

Copy prompt
one flick = one step
01020304
flick or swipe over the panel

Intent-based trigger

reads wheel intent, not scroll distance — one gesture, one step

Copy prompt
OneTwoThree
pinned — keep scrolling to scrub

Section pinning

the section holds still while your scroll scrubs a nested sequence

Copy prompt
0102030405
vertical scroll drives horizontal travel

Horizontal scroll in a vertical context

pin the parent, translate the track on X

Copy prompt
01020304
each card scales back and darkens as the next lands

Kinetic card stacking

absolute stack; the outgoing card drops to 0.86 and dims for depth

Copy prompt
driven
0% = runway progress
triggered
0% armed · fires at 50%
pinned — scroll to scrub

Driven vs triggered

same move twice — one scrubs with the scrollbar, one fires at 50% and runs on its own clock

Copy prompt
animation-range · subject 3× the scrollport
01
02
03
04
05
06
entry
saturated at frame-fill — the subject is still crossing
01
02
03
04
05
06
entry-crossing
100% only when the tail edge clears the entry edge
pinned — scroll to scrub

Entry vs entry-crossing

taller-than-scrollport subject: entry saturates at frame-fill, entry-crossing maps the full traversal

Copy prompt
pinned — scroll to scrub

Path draw on scroll

stroke-dashoffset reveals the stroke while offset-distance rides its tip

Copy prompt

Simulation & Dynamics

move

Particle systems

emit and fade (follows cursor)

Copy prompt

Rigid vs soft body

same drop, same height — one holds its shape, one squashes

Copy prompt
move

Cloth

a 2-D constraint grid, not a single strand

Copy prompt

Procedural / generative

motion from a flow field, not keyframes

Copy prompt

Real-time & Skeletal

move

FK / IK

same two-bone rig, solved from the end-effector or from joint angles

Copy prompt

Morph targets / blend shapes

neutral to smile via vertex blend

Copy prompt
idle0.00
walk0.00
run0.00

State machine / blend tree

idle to walk to run, cross-blended

Copy prompt

Accessibility & Performance

full motion
reduced

prefers-reduced-motion

swap travel and rotation for a plain opacity change

Copy prompt
60 fps
16.7ms
120 fps
8.3ms
actual
—

Frame budget

live frame time against the 60 and 120 fps ceilings

Copy prompt