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, weve 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 well 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 didnt 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 objects 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
animations 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 its 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 viewers attention and make sure nothing is
missed.

3. Staging

In this scene from Rio, the toucans 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 viewers
attention and focusing it on a particular subject or area of the screen before
the action takes place. You must remember that the viewers dont 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
viewers 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 arent 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 coyotes 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 characters 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 characters 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 characterss

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.
Its 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 dont 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 dont 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 doesnt 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.
Theres a moment, just before they spill the beans, when they hesitate,
looking around to make sure no ones 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 doesnt 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. Youll 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.