The 12 Principles of Animation

1-

Squash and Stretch

The basic principle of either squashing or stretching helps give the illusion of weight and convincing movement. This
flexibility in objects and people is evident in real life, only on a much subtler scale.

Figure 1.
2-

Timing and Spacing

Timing (in animation specifically), is defined as how long something takes between point A and point B.
So: how many frames it takes for the subject to go from one position (frame 1) to their second position (frame 24), and
incidentally how long that sequence takes as a whole- in this example, 1 second. Spacing, on the other hand, is essentially
how that subject goes from point A to point B. From within that frame of time, that character/object may move slower at
one section of that movement, and faster in another. This ultimately brings an element of realism and believability into
that subjects movement.
Animation, traditionally, tends to be drawn in ones (where theres one drawing for one frame) or twos (when the single
drawings are held on two frames- so for example a sequence consisting of 24 frames would only have 12 drawings,
since the same drawings will be shown a second time after theyre featured). In hand-drawn animation, twos were more
common since less work would have to be completed. The only thing is drawing an animation in twos naturally makes the
content look disjointed at times. When this happened, the animator would go back in and draw new drawings in those
gaps to make the movement appear more fluid.
Though I would have thought faster action would mean slower action, in actual reality it doesnt (necessarily), since they
are not adding time, but rather manipulating the spacing of the frames. There is essentially more images in the same
amount of time.
The choice of twos and ones, can be determined by the required cinematography, and the mood of the characters. For
example: Twos are used as a whole, generally, while Ones for camera movements (truck and pans shots, and sometimes
for quick dialogue animation etc.). Additionally there is the use of space in indicating the mood or emotion of a character,
in relation to the story. Sometimes there will be more drawings for each and every frame in specific areas of movement to
help capture the flow of the sequence.

3-

Ease in and Ease Out

As is the case of most things in day-to-day life, speeding up and slowing down are fundamental aspects of movement.
Showing this in ones animation can really bring a sense of realism to the work.
To execute ease in and ease out in your work, you must put the concept of Spacing to good use. The things to remember
is: closer spacing- slower action, while wider spacing-quick action. An example would be the act of someone starting to
run, and quickly stopping again. The act of running would require the person to go from a no movement, to a gradual
acceleration before slowing down again back down to a stationary position. If the character 0 mph to 8 mph with no
transition itll look a quite odd. Even more so if the subject was a vehicle, (or some kind of fast-moving machine).

Figure 2.

Figure 3.

4-

Anticipation

Before any major action or movement, the animator must first prepare the viewer beforehand. This means if a character is
about to run, jump or react to any major plot development, s/he must be shown or considered in their seconds
beforehand, composing their body ready for whatever follows. Whether this be moving back slightly seconds before
walking, bending the legs before leaping over a ledge, twisting the body round and positioning the arm back before a
punch etc.
All these actions and more must be considered in their full sequence, even if they are the most subtle of things (non-verbal
communication). They will all unconsciously be read by the human mind.

Figure 4.

5-

Follow Through and Overlapping Action

Both of these principles work with the idea that not everything will be moving at the same rate, or space in time.
Follow Through is concerned with the idea that different parts of the body will continue moving after the person has
come to a halt. As the person, or character in this case, stops, their arms, clothing, hair, ears, (whatever it may be), will
need longer to catch up with the main body itself. For organic movement, its important to consider the fact that nothing
stops all at once.
Overlapping Action works with the idea that separate parts of a character will move at different times. So, for instance, if
this character hadnt stopped but rather quickly turned left and carried on forward: the arms, the hair, the clothing, etc,
would all take another couple of frames to catch up for each directional change. This can be referred to as Drag.
In the 1940s Hollywood style of cartooning, (as seen brought to life later in Richards Williams 80s Roger Rabbit), this
effect is more prominent. Often the most obvious example would be the way in which upper body and head, and legs and
feet do not work at the same pace. In Roger Rabbits case, his upper torso and arms almost hangs over his legs when
walking. Additionally we can see his ears trailing behind his wake, bobbing up and down. In more realistic style of
animation: Snow White- the effect, though limited more into clothing and hair, is more subtle but definitely still in use.

Figure 5.

6-

Arcs

Figure 6.
Movement and action tends to follow an arc or circular-like course. This applies not just to major actions, however, but
also to the more subtler forms of non-verbal communication. I.e. the dipping and twist of a head (turning face), the heel
and arch of the foot as it settles down on the ground before being lifted up from the toes and swung forward again
(walking), and even eye movement, can follow this rule.
7-

Exaggeration

This step is pretty self-explanatory. Often exaggerating movements beyond their subtler, more realistic and inspired
counterparts, can add interest and emphasis to the intent and feel of the story/character. It makes movement easier to
read, anticipate and enjoyable to watch. Evoking an emotional relatability in the audience, of all the feelings and physical
consequences that come from the characters decisions. Have you ever watches a character take a hit from an antagonist
and cringed? Or felt the force being put behind a certain move? These are often a result of clever exaggeration, on the
animators part.

8-

Solid Drawing

Weight, volume, balance and anatomical knowledge are all vital in creating a seemingly believable drawing. It can help give
the illusion of space and time in your work.
This principle is not just limited to 2D drawings, however, but also relevant in more digital, 3D endeavours. During the 3D
rigging process, making sure your character is weighted and balanced believably can bring help that character to life.
Something to consider is avoiding Twinning, which essentially means the character is identical on both sides.
Seeing someone with their body rigidly vertical, both hands on hips and face snapped forward makes them seem almost
robotic. Which is great if that is what you are aiming for, but not so much, if it is something more organic you are trying to
create. It is best, at that point, to consider Soliditity is ones drawings.

Figure 7.

9- Appeal
Appeal is concerned with easy-to-read character design,
clear drawing and successful personality development.
All of which entices the audience in, and helps said
designs to stick in their mind. This is often done by
drawing out/exaggerating certain characteristics that
reflect that characters role and personality. Conflicting
characteristics and design choices may disrupt the flow of
the narrative, and make it harder for the viewer to
watch.
10- Straight Ahead and Pose to Pose
There are two methods employed by artists when
animating a scene. The first (are more reliable of the
two), Pose to Pose, is extremely plan driven. The
sequences is split up into Key Frames, then Extremes,
and finally the Fillers (or transitional drawings). From
there, charts are relied upon to employ the Ease In, Ease
Out method,
Ultimately, this approach is structured its clear, its
logical, its ordered so the keys fall exactly on time, its
preferred when working in large groups where the
drawings are passed on and continued by the assistants,
and the work can be finished in a punctual manner.
Figure 8.

Figure 9.

The main drawback, however, is that it lacks the fluidity of movement So the animation may seem quite unnatural.
Additionally, Richard Williams states that if they correct that by adding overlapping action, it can easily go the other way
and be rubbery and squishy-equally unnatural. That is why the other method: Straight Ahead, is also used to some
degree. This approach allows a more natural, unexpected way of animating, since the artist draws with no finalised intent
in mind.
This is good, since the animator can grasp a natural flow of narrative, its more interesting and unexpected, its a lot more
creative, it allows the unconscious mind to be involved, and finally it captures that sense of magic that Disney is famed
for. Unfortunately, it also comes with many disadvantages. With no structure in mind, the story may trail off a bit. When
this happens the animation tends to lengthen, and the story has no seemingly obvious ending nearby.
The drawings also seem to divert a lot, often growing and shrinking in size, reducing the believability substantially.
The timings off, the director doesnt know when the animations going to be ready, its difficult to assist
You essentially need a combination of both, to get the most out of your animation.
11- Secondary Action
Secondary Action is used in animation to help enforce the main action of the scene, to help build a more, believable and
life-like character. No one tends to just perform just one action in response to a certain scenario, nor are they a blank
canvas of emotion when they are confronted by it. Often, there are plenty of examples of non-verbal communication,
unconsciously packed in and around a main action. This we pick up, and help build up an overall picture of that
characters outlook. This helps deepen and enrich that characters depth of personality. Additionally, when you observe
and feature the things in life that happen constantly and are yet, not often noticed, in your work you tend to bring with
you a sense of realism.
These actions are subtle, and in no way obtrude across the Primary Action of the scene.

Figure 10.
12- Staging
Finally, we reach Staging, which is essentially the way in which an animator sets up a scene.
This means considering: 1- the camera angle, 2- the positioning of the characters, and 3- the background, mid-ground and
foreground elements (to establish distance and perspective). The purpose of which is to communicate to the audience, in
the most effective way possible, what is essentially happening in that scene.

Rachael Holyhead

Illustrations
Online
Figure 1. Baxter, James (2015) Artists example of the Squash and Stretch Principle [Drawing] Available at:
http://jbaxteranimator.tumblr.com/post/109817223324/hey-there-im-interested-in-animation-but-im [Accessed on:
11.10.16]
Figure 7. Masters, Mark (2014) Image example of Twinning [3D Model] Available at:
http://blog.digitaltutors.com/understanding-12-principles-animation/ [Accessed on: 11.10.16]
Figure 10. Rigby, Joel (2013) Secondary Action: for more life and meaning [Drawing] Available at:
https://joeltrigby.wordpress.com/abc-animation/character-animation-2/12-animation-principles/ [Accessed on: 11.10.16]
Figure 5. Rinaldi, Dante (\) Image example of the Overlap and Follow Through principles [Drawing] Available at:
https://danterinaldidesign.com/principles-animation-follow-overlap/ [Accessed on: 11.10.16]
Figure 4. Tubor, Andy and Kay, Rob (2010) Image example of the Anticipation principle [Drawing] Available at:
http://www.gamasutra.com/view/feature/134398/an_artists_eye_applying_art_.php?print=1 [Accessed on: 11.10.16]
Figure 8. Yan, Wenqing (2010) Doodle Sketches: 2 [Drawing] Available at: http://yuumei.deviantart.com/art/DoodleSketches-2-175194927 [Accessed on 11.10.16)
Book
Figure 2. Williams, Richard (2009) Artists example of Timing and Spacing [Drawing] In: William R. The Animators
Survival Kit: Expanded Edition. London: Faber and Faber Limited.
Figure 3. Williams, Richard (2009) Artists example of Natwicks use of Spacing and Arc of Action [Drawing] In: William,
R. The Animators Survival Kit: Expanded Edition. London: Faber and Faber Limited.
Figure 6. Williams, Richard (2009) Artist illustrating the importance of the Arc of Action [Drawing] In: William R. The
Animators Survival Kit: Expanded Edition. London: Faber and Faber Limited.
Figure 9. Williams, Richard (2009) Artist illustrating stages of combined Straight Ahead and Pose to Pose approach
[Drawing] In: William R. The Animators Survival Kit: Expanded Edition. London: Faber and Faber Limited.