Design Knowledge Base

Motion Techniques

One live demo per technique — CSS and canvas, with three.js for the 3D stages. Loops run continuously; several respond to drag, click, or scroll. Every stage is ruled with a reference grid so movement can be read against a fixed ground. Three styles: two monochrome specimen sets and a Cartoon Modern set after Amidi.

The 12 Principles

believable movement12
1 · Squash & stretchdeform on impact; conserve volume
2 · Anticipationwind-up before the action
3 · Stagingclear the clutter, direct the eye
pose-to-pose
straight-ahead
4 · Straight-ahead vs pose-to-posecontinuous vs key poses + in-betweens
5 · Follow-through & overlapthe tail settles after the body stops
6 · Slow in & slow outaccelerate and decelerate (easing)
7 · Arcsnatural motion follows curves
8 · Secondary actionsupporting motion (the swinging tail)
9 · Timingheavy is slow, light is fast
10 · Exaggerationsubtle vs pushed squash
11 · Solid drawinglit volumes, real weight and silhouette
12 · Appealcharisma; satisfying to watch

Timing & Easing

the shape of the speed curve4
linear
ease-out
ease-in
ease-in-out
spring
Easing curveslinear · ease-out · ease-in · ease-in-out · spring
critically damped
underdamped
overdamped
Spring damping regimessnap · multi-bounce overshoot via CSS linear() · sluggish crawl
100ms
300ms
500ms
1000ms
Durationthe same move at 100, 300, 500 and 1000ms
Rhythm & pacingquick-quick, hold, accent

Physicality

the feel of mass and force5
Overshoot & settlepass the target, ease back
Bouncedecaying overshoots
Anticipation → action → reactionwind-up, move, recoil
Weight & centre of gravitytall mass tips about its base; light mass rights itself
drag
Rubber-bandingdrag past the edge; it resists and snaps back

Space & Transformation

where and how things move7
Translate / slidespatial relationship
Scalegrow-from-origin; hierarchy
Rotate / skeworientation and dynamism
Morph / path interpolationmatched vertex counts interpolate continuously
Dissolve / crossfadesoft state swap
Wipe revealwipe content in and out
Parallaxlayers at different speeds create depth

Sequencing & Choreography

many elements, in concert3
Staggeroffset starts cascade
Choreographyone leads, others follow
Progressive disclosurereveal complexity in layers

Drawn Timing

traditional timing5
on ones
on twos
on threes
On ones / twos / threesframes-per-drawing sets smoothness
Cycles & loopsseamless, reusable motion
Held frames / moving holdsa still pose still drifts
Smears / multiples / speed linesdeform on travel, ghost trails, drawn streaks
Motion blurdirectional blur on fast motion

Camera Motion

how the frame moves, and how it frames3
Camera rigcrane, truck and dolly shift per depth plane; pan, tilt and zoom do not
Shot types & framingthe same subject, reframed — how close you are, and from what height
Camera shakethe real camera wiggles and settles after the hit

Motion-Graphics Craft

title work, trailer work, limited animation7
Sweep
Light sweepa bright specular band rakes across the mark
Ambient
Background movementthe ground is never completely still
SIGNAL
SIGNAL
SIGNAL
Twitching / jitterrandom-interval displacement, not a loop
Depth
3D extrusionstacked offsets read as dimensional type
Pop-on / limited animationsnap between extremes, no in-between drawings
Selective animationhold the whole figure, move one part only

Kinetic Typography

type as the moving subject0
Kinetic typographytype as the moving subject, staggered per character
wght 400 → 700 · wdth 100 → 79
Metric-Compensated Emphasiswght climbs while wdth pays for it, so the line never reflows

Kicker

Headline

Standfirst

Hierarchy Reflowgrid row fractions interpolate; type resizes, never translates
Contested Measurethree slices of one oversized word re-cut 'opsz' out of phase; the measure tears at the seams
'opsz' 6 on the cut
Bridge The Cuta held slate stack bridges hard cuts; every splice punches 'opsz'
Four Formationsone word re-set four ways and cut on a steps() clock

MELT

FLUX

Viscous Coalescencean alpha-threshold blur fuses two passing words into one mass
Conducted Slantthe count rides a morphing baton path; slnt stabs land on each beat
Cut-Paper Lockuphard-edged paper blocks slide on independent clocks; the pre-cut word docks into their negative space
Hit Pointseach collision spawns its word at the impact point, cut on steps(1) frames
4×3 · 150ms clocks
Identity Sequencercell states flip on offset 150ms clocks; once a bar the grid snaps to the clean lockup
slnt −10
Style Zonea fixed slanted band restyles whatever scrolls through it

UI & Functional Motion

feedback, continuity, delight10
Enter / exitin from below, out above
Pop-in / revealscale-in with overshoot
Blur materialisationopacity plus de-blur into focus
click
Shared-element / continuitythe same element morphs between states
click
Feedbackdepress plus ripple confirms input
Guidancea pulse nudges attention
click
click for delight
Delighta rewarding burst
drag
Gesture-drivenmotion tracks your drag
scroll drives this — keep scrolling
0%
Scroll as inputprogress tied to the scroll timeline, not a clock
transform · compositor
left · triggers layout
Jank / compositor-only motionanimating transform stays smooth; animating left re-lays-out each frame

Scroll-Driven

progress tied to the scrollbar, not a clock — all native11
build-in · build-out
pinned — scroll to scrub
Build-in / build-outopacity plus translate on entry, reversed on exit
scale + radius
pinned — scroll to scrub
Dimensional scalingscale coupled to border-radius so the element recedes
clip-path circle()
pinned — scroll to scrub
Iris revealcircle(6%) to circle(75%) bursts open from the centre
pinned — scroll to scrub
Parallax depth scalara depth scalar per layer: near travels furthest
DEPTH DEPTH DEPTH DEPTH DEPTH
pinned — scroll to scrub
Volumetric 3D layerspreserve-3d stacking on the Z-axis, no WebGL
animation-range
entrycontainexit
playhead follows this frame
pinned — scroll to scrub
Range phasesentry · contain · exit — which slice of the pass drives the animation
scroll(root) — whole document
tracks the whole page, not this frame
Scroll progress timelinedocument position, independent of any one element
one flick = one step
01020304
flick or swipe over the panel
Intent-based triggerreads wheel intent, not scroll distance — one gesture, one step
OneTwoThree
pinned — keep scrolling to scrub
Section pinningthe section holds still while your scroll scrubs a nested sequence
0102030405
vertical scroll drives horizontal travel
Horizontal scroll in a vertical contextpin the parent, translate the track on X
01020304
each card scales back and darkens as the next lands
Kinetic card stackingabsolute stack; the outgoing card drops to 0.86 and dims for depth
driven
0% = runway progress
triggered
0% armed · fires at 50%
pinned — scroll to scrub
Driven vs triggeredsame move twice — one scrubs with the scrollbar, one fires at 50% and runs on its own clock
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-crossingtaller-than-scrollport subject: entry saturates at frame-fill, entry-crossing maps the full traversal
pinned — scroll to scrub
Path draw on scrollstroke-dashoffset reveals the stroke while offset-distance rides its tip

Simulation & Dynamics

motion generated by physics4
move
Particle systemsemit and fade (follows cursor)
Rigid vs soft bodysame drop, same height — one holds its shape, one squashes
move
Clotha 2-D constraint grid, not a single strand
Procedural / generativemotion from a flow field, not keyframes

Real-time & Skeletal

rigs, targets, states3
move
FK / IKsame two-bone rig, solved from the end-effector or from joint angles
Morph targets / blend shapesneutral to smile via vertex blend
idle0.00
walk0.00
run0.00
State machine / blend treeidle to walk to run, cross-blended

Accessibility & Performance

the non-negotiables2
full motion
reduced
prefers-reduced-motionswap travel and rotation for a plain opacity change
60 fps
16.7ms
120 fps
8.3ms
actual
—
Frame budgetlive frame time against the 60 and 120 fps ceilings
©1999–2026 Nural Choudhury. All rights reserved.