The twelve principles of animation

Where the list came from and why it still holds

The principles of animation come from a book published in 1981: Disney Animation: The Illusion of Life, by Frank Thomas and Ollie Johnston, two of the old Disney animators. That book was written for hand-drawn character animation, meaning for a time when somebody drew every frame and had to make a creature seem alive.

So the first honest statement is this: half of the list is no use to you. The principle saying a character volume should squash and stretch through a jump is meaningless for a bank logo, and in practice it is a tell of beginner work. What remains and still works are the five that are about time rather than about drawing: when a move starts, at what acceleration, what comes before it, what comes after it, and where the viewer eye is meanwhile.

The reason they lasted is not mysterious either. Those five describe how the human eye reads movement, and the human eye has not changed since 1981. The browser showing you this page has turned one of them straight into numbers and written it into a standard, which you will see in the third section of this lesson.

Timing and spacing, the thing to get right first

Timing means how many frames a move takes. Spacing means where the object sits in each of those frames. The two get confused constantly, and the difference is everything: two moves with identical timing and different spacing give two completely different feelings.

A worked example makes it concrete. Say the frame rate is 24 and a shape has to travel from left to right in twelve frames, meaning half a second. If it advances one twelfth of the distance on every frame, the spacing is even and the result is that artificial linear motion. If it covers half the distance in the first four frames and the other half across the remaining eight, those same twelve frames become a move that gathers speed and then settles. The timing did not change, only the spacing did. These numbers are an example rather than a rule; there is no table of correct durations in this lesson, because the right duration depends on the size of the move and on where it plays.

The practical habit: whenever a move looks wrong, look at the spacing before you look at the duration. Beginners usually slow the move down, and that is the wrong fix; a slow move with even spacing is simply a slow artificial move.

Why linear motion looks artificial

Nothing in the physical world starts at a constant speed and stops at a constant speed. The principle that says so is called slow in and slow out in that book, and in software you know it as easing. It is the only one of the twelve that has been turned straight into numbers and written into a standard.

The W3C draft called CSS Easing Functions Level 1 defines the four browser keywords with exact Bezier curves: ease equals cubic-bezier(0.25, 0.1, 0.25, 1), ease-in equals cubic-bezier(0.42, 0, 1, 1), ease-out equals cubic-bezier(0, 0, 0.58, 1) and ease-in-out equals cubic-bezier(0.42, 0, 0.58, 1). Those same four are usable in any motion graphics application, because a Bezier curve is the same thing everywhere. If you have been dragging curve handles by eye, you can now type numbers.

And a practical position that tutorials rarely take: for something entering the frame, ease-out usually reads better than ease-in-out. The reason is that the viewer wants to see where a thing lands, not where it set off from; a move that starts fast and stops softly gives exactly that. The reverse belongs to something leaving the frame.

There are also places where linear motion is correct, and they are not rare: a continuous rotation, a scrolling ticker, a conveyor that never stops, a loading spinner. In all of those the movement has no beginning and no end, so slowing in and out means nothing. The next figure puts the two cases side by side.

The anatomy of one move: anticipation, action, follow through, settle

A good move has three parts, and most beginners build only the middle one. Anticipation is a small move in the opposite direction, right before the main one: a thing about to drop from above first rises slightly for a few frames. Its job is to prepare the eye. Without it the main move feels abrupt and the eye misses its first moment.

Follow through is the same idea at the end: a thing coming to rest does not stop exactly on target, it overshoots slightly and comes back. Its less known half is that the parts of an object do not stop together. If a card with text inside it enters the frame, the text should settle a few frames after the card, not at the same moment. That single small delay does more for a professional feel than any other setting.

On the mrgym exercise pages, which are our own project, this is written into the CSS: a bar chart rises through a keyframe named mgx-grow over nine tenths of a second, and the number that sits above the bar arrives through mgx-rise with a delay of forty two hundredths of a second after the bar itself. The number waits for the bar to nearly finish. That is the follow through principle exactly, written in CSS syntax instead of in an animation application.

And the settle. A move that starts the next thing the instant it arrives does not read. The eye needs a moment of stillness to register what it saw, and that moment has to have room in your timing rather than being left out.

Staging: why everything should not move at once

Staging means directing the viewer gaze. In character animation it meant posing so the pose still reads as a silhouette. In motion graphics it is simpler and harder: at any given instant only one thing should be the most important thing.

Movement is the strongest attention tool there is, stronger than colour and stronger than size. That is why when five elements enter together, none of them is seen. The practical rule is simple: let one element move at a time and keep the rest still. If several really must enter, stagger them with delays rather than starting them together.

The second point, less often said, is accidental synchronisation. Two repeating movements of the same duration lock together after a few seconds and the eye reads them as one thing. On that same mrgym exercise page, the target muscle pulses on a cycle of one and nine tenths of a second and the supporting muscle on two and four tenths: two close but unequal numbers, so that they never fall into phase. Had both carried the same number, the two muscles would look like one thing and the whole point of the display would be gone.

The remaining seven, and which are no use here

The other seven on the list are these: squash and stretch, straight ahead action against pose to pose, arcs, secondary action, exaggeration, solid drawing, and appeal. Three of them are useful in motion graphics and four are not, and honestly nobody makes that split for you in the tutorials.

The ones that stay: arcs, meaning an object travelling along a slight curve rather than a straight line, which always reads better. Secondary action, meaning small details happening alongside the main move, such as a shadow shifting with a card. And exaggeration, which is dangerous in corporate motion but is exactly the thing that gets social content seen.

The ones that do not: squash and stretch on a logo is nearly always wrong, because a brand mark that stretches is no longer that mark. Solid drawing is about rendering volume in three dimensional space and does not apply to flat graphics. Appeal is about character design, and its equivalent here is that the still frame has to be a good design in the first place, which is the job of design principles rather than of animation. And straight ahead against pose to pose is a production method rather than a look: in a keyframe application you are always working pose to pose, so the choice barely exists.

How to check your own work

None of these principles can be checked by looking at keyframes. They are checked by watching, and watching means at real speed, on the device the piece will play on. A move that only looks right while you drag the playhead back and forth is not right.

Three tests with no taste in them. First, the one pass test: watch it once, then say where your eye was at each moment. Anywhere you cannot say, the staging is broken. Second, the pause test: stop at any instant you like and count how many things are moving; more than one is usually one too many. Third, the muted test: turn the sound off and see whether you still understand what is happening.

And one rule that sits outside the list but matters as much: if the piece plays on a website, it needs a state where the prefers-reduced-motion setting simplifies or stops it. That setting exists for people who are made unwell by heavy movement, and ignoring it means part of your audience closes the page. The web accessibility lesson has the detail.