Animation is not a series of drawings. It is the illusion of weight, intent and life, produced by controlling how things change over time. The principles below were codified at Disney in the 1930s, published as the twelve principles of animation, and they transfer intact to 3D, motion graphics, game animation and the little transitions in a phone interface.
The four that fix most student work
| Principle | What it means | What it fixes |
|---|---|---|
| Timing | How many frames an action takes | Motion that feels floaty or frantic |
| Squash and stretch | Deforming an object as it accelerates or impacts, keeping its volume constant | Objects that feel rigid and weightless |
| Anticipation | A small opposite motion before the main action | Movements that start abruptly and read as teleporting |
| Follow-through and overlapping action | Parts keep moving after the body stops, and different parts stop at different times | Everything freezing at once, which looks robotic |
Timing is the single biggest lever
The same drawings at 6 frames look snappy and at 24 frames look sluggish. Nothing else you change will affect the feel as much. When a shot is not working, adjust the timing before you redraw anything.
The rest of the twelve
- Slow in and slow out (easing) — real things accelerate and decelerate rather than snapping to full speed. Cluster frames near the start and end of a move. This is the principle every UI animation depends on.
- Arcs — almost nothing living moves in a straight line. A hand, a head turn and a thrown ball all travel along curves.
- Secondary action — a smaller motion supporting the main one: hair bouncing while a character walks. It must not compete with the primary action for attention.
- Staging — presenting an idea so it is unmistakable. One clear idea per shot, with the composition pointing at it.
- Straight ahead vs pose to pose — drawing frame by frame from the start gives spontaneity; setting key poses first and filling between gives control. Most work mixes both.
- Exaggeration — pushing an action beyond the literal so it reads clearly. Realism alone often looks limp on screen.
- Solid drawing — forms that hold their volume and sit convincingly in three dimensions.
- Appeal — a design the eye wants to follow. Not the same as being pretty; a villain can have enormous appeal.
AStraight ahead
- Draw each frame in order from the first
- Spontaneous and fluid
- Good for fire, smoke, water, explosions
- Hard to control the ending or hit a specific timing
BPose to pose
- Set the key poses first, then fill the gaps
- Controlled and easy to plan
- Good for character acting and dialogue
- Can look stiff if the in-betweens are evenly spaced
Easing, in practice
Easing is slow in and slow out expressed as a curve. Software gives it to you as a graph of value against time, and the shape of that curve is the difference between motion that feels mechanical and motion that feels designed.
| Easing | Curve shape | Use it for |
|---|---|---|
| Linear | Straight line | Machinery, conveyor belts, constant scrolling — rarely anything alive |
| Ease out | Fast start, slow finish | Something arriving and settling — the most common UI choice |
| Ease in | Slow start, fast finish | Something leaving the screen |
| Ease in-out | Slow at both ends | A move that both starts and stops on screen |
Linear motion is the giveaway of an unfinished animation
Software defaults to linear because it is the simplest interpolation, not because it looks good. Almost nothing in the physical world starts and stops instantly, so linear movement reads immediately as machine-made. Changing the default to an ease is usually the single fastest improvement available to a first draft.
Where these principles show up now
Every app you use animates its transitions with easing and anticipation. A button that grows slightly before it shrinks on tap is anticipation. A panel that slides in and settles is ease-out. Motion design is the same discipline as character animation with different subject matter.