The Craft of Motion: Frame-by-Frame Animation Principles

Disney's twelve principles of animation were codified in the 1930s for hand-drawn character animation. Most motion designers know them by name. Fewer apply them systematically to graphic motion work. But these principles describe real perceptual phenomena — they work whether you're animating a cartoon character or a logo reveal.

Squash and Stretch in Graphic Motion

Squash and stretch — the compression and elongation of forms during motion — communicates weight and flexibility. In character animation, it makes objects feel physical. In graphic motion, it can make abstract shapes feel alive.

A button that squashes slightly when "pressed" and springs back reads as having physical mass. A logo element that stretches slightly during a fast move and settles back communicates kinetic energy. These are micro-effects — too subtle to be consciously noticed, but their absence makes motion feel mechanical and lifeless.

Anticipation

Anticipation is the preparatory move before the main action. A ball bounces slightly downward before launching upward. A door handle depresses before the door swings open. In graphic motion, anticipation before a major reveal or transition signals to the viewer that something is about to happen — it prepares the eye.

Without anticipation, motion feels sudden and uncontrolled. With it, even fast, energetic motion feels intentional and directed.

Follow-Through and Overlapping Action

When primary motion stops, secondary elements continue moving briefly before settling. Hair, clothing, and body parts in character animation. In graphic motion: when a headline snaps into position, the period at the end can bounce slightly after the letterforms settle. When a logo assembly completes, a graphic element might continue a small oscillation before coming to rest.

Overlapping action — elements at different rates — creates depth and dimension. A composition where everything moves at identical velocity feels flat. Layered timing creates a sense of spatial hierarchy.

Ease In and Ease Out

This is the principle most motion designers know explicitly. Objects accelerate from rest (ease in) and decelerate to rest (ease out). The velocity graph for this motion is an S-curve rather than a straight line.

Applied to graphic motion: elements entering the frame ease in from their off-screen origin. Elements settling into position ease out as they arrive. This creates motion that feels physical and controlled rather than mechanical and arbitrary.

Secondary Action

Secondary action supports and reinforces the primary action without competing with it. In graphic motion, a text reveal might have a subtle color shift as secondary action — the type's color warms slightly as it arrives, reinforcing the arrival without distracting from the legibility of the letterforms.

Secondary action should be invisible when it's working correctly. The viewer feels the effect without identifying the cause.