The 12 Rules of Animation

By Angie Taylor | on May 23, 2011

Animation as we know it has been around since Horner invented the zoetrope in 1834. Since then
animators have developed a set of rules that help us to draw viewers into the world we have created.
From Disney classics to the latest stereoscopic 3D productions, we’ve plundered them all to find the 12
key techniques you need to master to be a top-flight animator.
Some of these rules are based on real-life physics, and others on observations and reactions. They
provide a set of invaluable ‘tricks’ for animators that have been proven to work in almost every
situation.
Here we’ll discuss 12 rules or key aspects of animation and use examples of character animation to
explain them and how they can be applied. Note that these same principles can be applied to motion-
graphic design just as effectively.
1. Squash and stretch

This jumping rabbit is a good case of squash and stretch. As it lands, it squashes
down, and as it jumps, it stretches along the arc shown
One of the most important aspects of animation is the squash and stretch rule. For an object
to move convincingly, it must ‘give’ when external forces are applied to it. Factors that
influence motion include gravity, directional force and the mass of the object, as well as the
surfaces it comes into contact with.
Take a bouncing ball as an example. As the ball hits the ground, gravitational force, which
depends on the mass of the object, makes it come to blows with the surface, and this will
cause the ball to squash. Obviously a softer ball (for example, a beach ball) will squash and
stretch a lot, whereas a cannonball will hardly squash and stretch at all. But perhaps what you
didn’t know is that the ball will also stretch slightly as it falls and rises. Stretching is kind of like
the reflex action that comes before and after squashing.
Going back to our bouncing ball example, the only time the ball should look perfectly round is
at the top of each arc. You can use squash and stretch techniques to convey an object’s
density and mass.
Exaggerating squash and stretch can often add to the comedy value of your animations. Walt
Disney discovered that exaggerating these real-life physical reactions made for much more
effective animations – think of the way Tigger (right) moves when he bounces. That takes us
nicely to the next important rule of animation: exaggeration.
2. Exaggeration

The man in the first image is drawn from a low angle, exaggerating his feet. His
smoking hand appears less important as it on his far side. The second figure is drawn
from above and his feet are further from the viewer. The smoking is much more
noticeable because it is closer to the viewer
Exaggeration is a method of emphasising something to increase its significance or draw
attention to it. In animation, we use it to emphasise whatever key idea or feeling you wish to
portray.
For example, imagine you create a character who is smoking a cigarette while dancing. The
action to exaggerate is the one most relevant to the scene. If the animation’s purpose is to
illustrate the joys of dancing, it is the dancing that should be exaggerated. If, however, you
want to focus on the fact that the character is smoking (perhaps it’s an anti-smoking ad), you
would make him smoke in a very ostentatious way, with his feet making only tiny movements.
By exaggerating the right elements, you can guide the viewers’ eyes and give them the
message you wish to convey.
Using our bouncing ball example again, if we squashed the ball by the correct amount, the
animation would probably look a little weak. You would hardly see the squash at all because it
would be too slight and would happen too quickly. Exaggerating the amount of squash and
stretch, and the pause when it touches the ground, will make the animation more dynamic.
To sum up, good use of exaggeration can make an animation come to life. To make it really
work, choose the most important element of the scene, and apply exaggeration only to that.
Think carefully about the different elements that can have exaggeration applied to them:
movement, facial expressions, squash and stretch, bounce and timing. By exaggerating one
of these elements, you can draw the viewer’s attention and make sure nothing is missed.
3. Staging

In this scene from Rio, the toucan’s motion to the right of the screen (bottom) is
emphasised by a previous lean to the left (top)
Staging the animation means setting the scene – attracting the viewer’s attention and
focusing it on a particular subject or area of the screen before the action takes place. You
must remember that the viewers don’t have the luxury of knowing what is about to happen in
your animation, so if something moves very quickly, they may not have time enough to realise
what is going on.
This is why it is necessary to set the scene for them. Doing so can also set up a mood or
feeling that you want the viewer to understand before the action takes place. Examples of this
would be having the subject move suddenly to attract attention, colouring or lighting your
subject in such a way that it stands out from the rest of the scene, or using music or sound
effects to capture the viewer’s attention.
4. Anticipation
Anticipation can also be used to direct the attention to part of the screen, and it is often
intermingled with staging. However, there are differences that make it a rule unto itself.
Some anticipation occurs naturally. For example, imagine a mouse is about to hit a cat over
the head with a mallet. The mouse has to physically pull the mallet back before plunging it
down; the pulling back of the mallet is the anticipation moment. By exaggerating this moment,
you can let the viewer know what is about to happen.
There are other anticipation tricks that aren’t so natural but are useful nonetheless. For
example, in the old Road Runner cartoons, when the coyote falls off the cliff, he hangs in the
air for a second or two before plummeting to the ground. Without the dramatic pause, the
viewer would not have time to register the coyote’s very fast fall to Earth. These pauses are
rare moments of stillness in animation, and they can be used to make an action really stand
out.
5. Motivation

The main character’s face tells us something unpleasant is about to happen

Somewhat linked to staging and anticipation, motivation occurs when one action clearly
shows that another action is about to take place. Imagine that you are animating a car
speeding off from a crime scene. When the engine starts, the car shudders. You can
exaggerate this movement to let the viewer know that the car is ready to zoom off the screen.

6. Secondary action

Secondary actions reinforce the main action: here the character reacts after the
telephone gives him an electric shock
A secondary action is any action that results from the main action. Examples could include
your character’s tummy wobbling after he has jumped from a great height or an exaggerated
facial expression of agony after Tom has been hit on the toe by Jerry.
Like anticipation, secondary actions can be used to help to strengthen the idea or feeling you
are trying to portray. One thing to avoid is making the secondary action more prominent than
the main action, since it can then distract the viewer and detract from your intended message.
7. Overlap

In this scenes from the forthcoming Cars 2, a focus on the characters’s expressions
tells you more about the danger they are in than the explosion behind them
Overlap is when one action overlaps another. Imagine you are sitting at the breakfast table;
you take a bite of your toast and then have a sip of tea. You may still be putting the toast back
down on your plate with one hand while putting the cup of tea to your lips with the other.
These are overlapping actions.
It’s very important to apply this rule to make your animations flow nicely and have a natural
rhythm. In real life, very seldom does one action finish completely before another starts.
If you are new to animation, it may seem natural for you to animate actions in sequence, one
after the other. You should avoid doing this because it can make your animations look rigid
and unnatural if you don’t overlap the actions. This will take some practice, but a good tip is to
animate the actions individually first and then try overlapping them by adjusting groups of
keyframes along the timeline. With this technique, you don’t have to get the timing right the
first time.
8. Follow-through

What is the most important thing to Scrat in the Ice Age series of films? His facial
expression leaves no room for doubt
Follow-through is, again, something that occurs in nature and is often exaggerated in
animation. Think of a golfer taking a swing at a ball. The golf club doesn’t stop suddenly when
it comes into contact with the ball; it follows through and then gradually comes to a halt.
Another kind of follow-through is when a cat flicks its tail. After the cat has flicked the base of
the tail, a wave of action will follow through to the tip of the tail, even though the base has
stopped moving. This wave action can be observed everywhere in nature. Think of the way
fish flip their tails and bodies to swim. People show this kind of wave action in their movement
as well, although not always as elegantly as a cat or fish.
The human body sways as it steps from foot to foot when walking. When you are using
natural elements like water, plants, people and animals in your animations, you should try
your best to create fluid waves of movement.

9. Balance
Balance is crucial for an animation to be truly convincing. Your characters must be drawn in
poses that look real and sustainable. You can do this by drawing a centre line through your
character and making sure that you have equal mass on either side of the line. Balance will
change according to the weight of an object; heavy objects will generally take longer to pick
up speed. They will also take longer to stop moving than light objects because more
resistance is needed to slow them down.
10. Timing

In The Illusionist, the wild motion of the singer in the band The Britoons seems more
dynamic as it contrasts with the limited movement of his bandmates
Timing is not exactly a rule, but it is the most important aspect of animation and is what sets it
apart from other drawn art forms. So much of animation is about timing. Messages or feelings
that cannot be portrayed by a still picture can be communicated with the addition of timing.
One classic example that you see not only in film but also in real life is the dramatic pause.
Think of when somebody whispers a secret to a friend. There’s a moment, just before they
spill the beans, when they hesitate, looking around to make sure no one’s listening. This
moment makes the anticipation of the secret greater. Exaggerating a dramatic pause can
make an event in your animation funnier, more poignant or more intense.
11. Rhythm
A good understanding of rhythm will help you work out the timing of your animations. If music
is provided as part of the project, you can use this to define the rhythm of the piece.
If the project doesn’t require music, I often use a soundtrack to help time my animations and
then delete it once the animation is completed. Choose a piece of music that conveys the
mood you want to convey. You’ll be amazed at how the rhythm of the music improves the feel
of the whole animation.
12. Camera movement

The man on the left is standing upright. The character on the right is leaning to one
side, and in this case you need to make sure that his body adjusts to create balance.
Notice that the man on the right has moved the barbells more to his right to
compensate for his body leaning the opposite way. He is also sticking his leg out to
compensate. Think about balance not only when depicting human characters but also
with text or other objects in your animations
Camera movement can lend filmic conventions to your animation. Interesting camera angles
and animated camera movement can help to represent the point of view of a character. It can
add dynamism to an otherwise static scene and can give the viewer a sense of being more
involved in the piece.
Stills from Snow White and the Seven Dwarfs and of Tigger are copyright Disney Enterprises.
Images from Toy Story 3 and Cars 2 are copyright Disney/Pixar. Stills from Ice Age 4, Rio and
The Simpsons are copyright Twentieth Century Fox