The 12 principles of animation

In the 1930s the animators at Disney found a set of rules that made drawings feel alive, and in 1981 two of them, Frank Thomas and Ollie Johnston, wrote them down as twelve principles in their book The Illusion of Life. Animators still learn them today. Below, each principle has a plain explanation and, where one of our moves shows it, that move playing live on this page, with one number to change so you can see the principle at work: type a value, or press the button for the one we suggest. Where none of our moves shows a principle, we say so instead of faking a demo.

1. Squash and stretch

A body squashes when it hits something and stretches when it moves fast, while keeping about the same amount of "stuff". It makes things look soft and heavy at once. See it: Hop squashes on every landing and stretches in the air. Change one number: in Hop, change the hop's height from 54 to 120 and watch the landing squash read as a real thump.

2. Anticipation

Before a big action comes a small one the other way: a crouch before a jump, a wind-up before a throw. It tells the audience what is coming. See it: Jump for joy crouches before every leap. Change one number: in its first squash block, change 0.14 to 0 and the crouch disappears; the leap now looks as if the character were pulled up on a string.

3. Staging

Present one idea at a time, so clearly that nobody can miss it: a clear pose, a clear silhouette, and nothing else moving to distract. See it: Cower lifts both arms out from the body so the outline alone says "scared". Still is staging by stillness: a held character in a busy scene draws the eye.

4. Straight ahead action and pose to pose

Animators either draw every frame in order, straight ahead, or draw the key poses first and fill in between them. See it: Wave hello is pose to pose: it sets a key pose (arm up) and then swings the forearm between two positions, and the engine fills in every frame between them. None of our moves is drawn straight ahead, because Jabbertoon never draws frames one by one: it works out every frame from the poses.

5. Follow through and overlapping action

When a body stops, loose parts keep going for a moment; and the parts of a body do not all move at once. See it: Floppy hop lets the ears and tail lag behind each hop on springs, and Whip tail sends a swing down the tail one segment after another. Change one number: in Whip tail, change the lag from 0.09 to 0.25 and the swing rolls slowly down the tail.

6. Slow in and slow out

Things speed up gradually and slow down gradually; they rarely start or stop dead. See it: Walk in eases into its stop, and Fly out starts slowly and speeds up. Change one word: in Fly out, change the ease from "in" to "out" and the take-off starts fast instead.

7. Arcs

Living things move along curves, not straight lines. See it: Hop across traces a row of arcs by gliding sideways while it bobs, and Peck makes small loops by bobbing and shuffling at the same pace. Change one number: in Hop across, make the hops 80 pixels high instead of 34 and the arcs become tall bounds.

8. Secondary action

A smaller action that supports the main one: a hand gesture while talking, swinging arms while jumping. See it: in Bounce the arms lift out at the top of every jump, and Talk gestures as loudly as the voice. Change one number: in Talk, change the arm swing from 14 × loud to 40 × loud.

9. Timing

How long an action takes changes what it means: the same movement, fast or slow, reads as nervous or calm. See it: Fidget pairs a quick small bob with a lean that takes 15 seconds, and Breathe breathes at a calm pace. Change one number: in Fidget, speed the lean up from 0.4 to 2, and boredom turns into impatience.

10. Exaggeration

Push an action further than real life so it reads clearly, without breaking the character. See it: Angry shake shakes far harder than any real person would. Change one number: widen its side-to-side shake from 11 to 30 and anger becomes a tantrum.

11. Solid drawing

Drawing forms so they look solid, with weight and volume, from any angle. None of our moves shows this; it lives in the drawing, not the movement. In Jabbertoon it comes from the characters' views (front, side and back, drawn from the same bones) and from the looks: the Soft look shades every shape so it looks round.

12. Appeal

A character the audience wants to watch: a clear design, a readable face, a personality. No move can supply appeal by itself, so we do not pretend one does. Our characters are designed for it, with big readable faces, and you can build your own in the creator.

Try it yourself

Every move above can be opened in the block editor, where the numbers are on the blocks. Change one, watch the character, and you are using the same principles as the animators who first wrote them down.