12 PRINCIPLES OF ANIMATION

SQUASH & STRETCH

Squash and Stretch (S&S for short) is the principle of inserting a contrasting change of
shape from a squash pose to a stretch pose or vice versa to give life and flexibility in animation.
Motion can be stiff if the squash and stretch is absent. The transition between a proper Squash
pose to a Stretch pose or vice versa breaks the perfect solidity of an object used in the animation.
Squash and Stretch In Action
The principle of squash and stretch is the best applied on the classic Bouncing Ball. There
is a Squash pose on the drawing where the ball is in contact with the ground, and Stretch poses
just before and after it to provide the necessary contrast.

The classic bouncing ball with and without Squash and Stretch.
Squash and Stretch gives life and flexibility but not only that. It can help convey what the
material that something is made of. If the object uses a very little principle of squash and stretch,
it indicate a firmer material, like a ping-pong ball or a bowling ball. If an object uses principle of
animation a lot, it indicates a more flexible material such us rubber ball.
Why do animators need Squash and Stretch?
Squash and Stretch introduce a flexibility and make characters and inanimate objects
have a feeling of life. The latter is particularly useful when making rigid objects come to life,
like the classic Disney Flour Sack, which is a beginning traditional animator’s test case.
 Disney Four Sack Model Sheet, Note: Squash and Stretch Poses
Squash and Stretch does not necessarily have to be applied the whole time. As seen here
in this analysis by Disney Animator Walt Stanchfield, the shape of Tiger’s butt in these two
poses uses squash and stretch.

Tiger’s butt in two poses

 Squash and Stretch within a pose. Even the straight legs vs. bent legs are a form of S&S!

Different uses of S&S in body parts

S&S on multiple body parts—cheeks, mouth, eyes, head, ears, even the nose—to give life
and believability to the chewing action.

ANTICIPATION
Anticipation is a little workhorse of the 12 Basic Principles of Animation. As we
concentrate on making nice poses, timing, smooth motion, etc, it’s often to forget it in our work
but without it our animation can end up looking robotic.
Some examples of anticipation:
• Entire body squashing down before jumping off a building
• The heel of the foot pressing down before a step
• Mouth compressing before opening to speak
• An eye blink before a head turn
As you can see from the list, the size of the anticipation does not matter. It can be broad
or subtle.

A
broad form of anticipation as illustrated here by Richard Williams.
Why do animators need anticipation?
Here’s an example of anticipation at work in the classic bouncing ball. To illustrate it
clearly we’ll have the ball start from a static pose and then do a simple bounce.
Here’s bouncing ball with no anticipation. See how the jump into air seems unmotivated
and we have no idea when it is about to happen.

Bouncing ball without anticipation

We add anticipation to the jump action by adding a squash pose before the jump into the
air. It also serves nicely to store up the energy to motivate the upward leap. The ball begins to
have life already!

Bouncing ball with anticipation

Anticipation is really something that tells the audience that a new idea is going to occur.
In fact, anticipation can actually help a surprise moment by helping build the suspense that
something is about to happen. The audience is then prepared to look for it instead of missing it.
STAGING
Staging is oftentimes overlooked by animators and unnoticed by audiences. Staging can
inform an audience about character and narrative and it is a powerful tool. Staging is connected
to acting, timing, cinematography, and setting. When an animator understands staging, he or she
controls the attention of the audience and helps drive the story.
Three types of staging
1. Halves and thirds

One easy technique keeps the characters of interest in the a half or third of the camera frame.
If you divide a frame of the shot in half or thirds and place the character in those sections, you
control the attention of the audience while communicating the importance of that character.

Fluttershy from My Little Pony

With Fluttershy in the middle third, our attention is focused on her

Fluttershy from My Little Pony

2. Lines of focus
By using sets, other characters, and camera angles, one can create lines of focus that can
draw the attention of the audience where you intend it to be.

Clip from Peanuts

Here are clip from Peanuts where the characters eyeline is toward Linus Van Pelt, thus drawing
our attention to him. It tells us that he is saying something important.

Clip from Peanuts

3. Consistent Screen Direction

Screen direction is the direction that a character appears to be moving or speaking.
Having a consistent screen direction is important to convey information to your audience clearly.
 Example of consistent screen directioning
This sequence is an important conversation between the 2 object. To avoid confusion, the
screen direction of both characters remains constant throughout the sequence. The girl is always
on screen right while the boy is always on screen left. This simple technique keeps the audience
from becoming confused during this conversation.

STRAIGHT AHEAD ACTION & POSE TO POSE

There are mainly two approaches to animation that are used by Animators. The first
approach mostly known as Straight Ahead Action, because the animation is actually working
straight ahead right from the first drawing in the scene. Doing frame after frame, until he reaches
the end of the scene getting new ideas as he draws.
 The second is called Pose to Pose. In this method, the animator plans his character's
action and figures out which drawings will be needed to be drawn in order to animate the scene
or action. The drawings in this method are related to each other in both size and action. This
method also helps the in-between animators fill in the gap of the action knowing what the
outcome of the action would be. Such scene is always easy to follow and works greatly because
the relationships and foundation has been carefully planned before.

Both methods are still used to this day because each of them offer a certain strengths and
advantages for different types of actions in a scene. Sometimes they are even combined by the
animator who draws the scene, in such way that keeps the Straight Ahead Action controlled.
FOLLOW THROUGH AND OVERLAPPING
ACTION
Follow Through and Overlapping Action are nearly related techniques which when
applied to animation. It can help to render movement more realistically and help to give the
impression that characters follow the laws of physics.
Five areas of motion where Follow Through and Overlapping Action would apply:
1. A character might have a coat or long ears, and these parts would keep moving once the figure
had stopped moving. The ears, or coat, would "follow through" even after the main action had
stopped.
2. Bodies in motion do not move all at once, rather different parts of a body may move at
different speeds. Therefore, as one part of the body stops, another part (such as an arm), might
overlap or follow through the main action, slowly settling to a stop.
3. Loose flesh, such as a dog's floppy jowls, might move at a slower speed than the more solid
parts of the character. These parts might drag behind the main action.
4. The completion of an action - how the action "follows through" - is often more important than
the action itself.
5. The "moving hold". A character might come to a complete halt, but the fleshy parts might
follow through the main action in order to convey weight and believability.

Follow Through is the idea that loosely connected parts of a body or object will continue
moving after the character has stopped. Overlapping Action is a similar idea in that it describes
how different parts of a body or object tend to move at different rates.

Here’s an example where both Follow Through and Overlapping Action were applied to
the brown bag as it races across the screen.
SLOW IN AND SLOW OUT
The movement of objects in real world needs time to accelerate and slow down like
human body, animals, car and most other objects. For this reason and to make animation look
more realistic more pictures are drawn near the beginning and end of an action, this emphasize
the extreme poses, and fewer pictures are drawn the middle to emphasize faster action.
On a basic level, Slow In and Slow Out describes the tendency of things to come to rest,
or to start moving, in a progressive way. This is a principle that most people understand pretty
quickly, as it’s easy to observe in life.
Newton's laws of motion apply in the animated world. Basically stated, objects do not
move unless acted on by a force strong enough to overcome their inertia. And when they're acted
upon by a bigger force, they move or react in an equal and opposite manner.Acceleration due to
gravity is constant. This causes falling objects to gain speed until they're acted upon.

Pendulum Swing
At the top of its arc, a pendulum's velocity is slow. At the bottom, it's high. This kind of
speed change is referred to as ease-in and ease-out in animation. Ease-in means that the object is
gradually picking up speed; ease-out means that the object is gradually slowing down.
ARCS
The visual path of action from one extreme to another is always described by an arc. In
nature, arcs are the most economical routes by which a form can move from one position to
another.
Such arcs are used extensively in animation, since they create motion that is more
expressive and less stiff than action along a straight path.
In Computer Animation, motion is usually represented in a timeline view using splines
(arcs). The arcs represent the values of an objects parameters at a specific moment in time. The
method used for calculating interpolated keyframe values determines the characteristic of the arc
(motion).
A linear interpolation creates motion that is rather dull and stiff. While a spline
interpolation creates motion that is more expressive.
Nearly every movement follows a slightly circular path. If not movement would be
mechanical and stiff. So in animations the movement is designed along arcs. The arcs can be
drawn in with key frames so that the movement can be guided along to create a more naturalistic
feel. If in betweens do not follow the arc that the key frames are on, it will ‘kill’ the essence of
the movement.
Why is Arc important?
The arc is one of the most important tools to make movements realistic and pleasing to
the eye. Due to the moving object’s inertia, its path should be smooth unless it’s being
interrupted by an external force (e.g. impact). A smooth arc, like a dancer’s movement, is always
eye pleasing. On the other hand, an unintended broken arc can reduce the believability of the
movement.

Arcs are usually circular. Circular arc makes the movement organic. On the other hand,
linear or angular arcs can be used for mechanical movement. It really depends on the desired
effect. A straight arc gives the movement more power.

Linear Arc vs. Circular Arc

The visual signatures of objects

Secondary Action
 A secondary action is an action that results directly from another action. Secondary
actions are important in heightening interest and adding a realistic complexity to the animation.
If a secondary action conflicts with, becomes more interesting, or dominates in any way,
it is either the wrong choice or is staged improperly.
Generally, in facial animation, the movement is a secondary action, subordinate to the
bodies movement. The danger with facial animation isn't that it will dominate the scene, but that
it will not be seen. The change in expression should happen before or after a move, changes in
the middle of a major move will mostly likely go unnoticed.
A secondary action is any action that results from the primary action. Adding this
principle to the main action gives the scene more life by supporting and enhancing the main
action.
For example a person walking is the primary action.
Now by adding secondary action like him holding a phone and bobbing his head adds
more interest to this plain simple walk or by adding his muffler waving can enhance the mood of
the scene, making it look windier and tell the emotional state of the character.
Important thing to know about secondary actions is that they emphasize, rather than take
attention away from, the main action. Like the guy in the example below is typing hard on the
keyboard, by adding a subtle gesture of him wiping his forehead adds to the tension and conveys
the idea of urgency.
Like anticipation, secondary actions can be used to help to strengthen the idea or feeling
you are trying to portray. Like in the example below. The Character is waiting for his phone to
ring. By adding subtle foot taps to the primary action of wait, enhances the mood of the idea
being told.
A secondary action is an action that results directly from another action. Secondary
actions are important in heightening interest and adding a realistic complexity to the animation.
A secondary actions is always kept subordinate to the primary action if it conflicts, becomes
more interesting, or dominates in any way, it is either the wrong choice or is staged improperly.

TIMING
Timing is everything, especially when it comes to animation. Timing involves a few
simple principles: how quickly something moves and how long it stays still. Slowing something
down in time adds weight, gravity, and mass. Speeding something up adds a sense of speed,
lightness, and energy. It also gives meaning to movement, both physical and emotional meaning.
The animator must spend the appropriate amount of time on the anticipation of an action, on the
action, and on the reaction to the action. If too much time is spent, then the viewer may lose
attention, if too little, then the viewer may not notice or understand the action.
Timing can also affect the perception of mass of an object. A heavier object takes a
greater force and a longer time to accelerate and decelerate. For example, if a character picks up
a heavy object, e.g., a bowling ball, they should do it much slower than picking up a light object
such as a basketball. Similarly, timing affects the perception of object size. A larger object
moves more slowly than a smaller object and has greater inertia. These effects are done not by
changing the poses, but by varying the spaces or time (number of frames) between poses.
Timing can also indicate an emotional state. Consider a scenario with a head looking first
over the right shoulder and then over the left shoulder. By varying the number of in between
frames the following meanings can be implied:
No in-betweens - the character has been hit by a strong force and its head almost snapped off
One in-betweens - the character has been hit by something substantial, .e.g., frying pan
Two in-betweens - the character has a nervous twitch
Three in-betweens - the character is dodging a flying object
Four in-betweens - the character is giving a crisp order
Six in-betweens - the character sees something inviting
Nine in-betweens - the character is thinking about something
Ten in-betweens - the character is stretching a sore muscle

EXAGGERATION
In animation, exaggeration is its own principle, but in many ways it can best be explained
as how it can be applied to some of the other principles in order to breathe more life energy into
the characters you’re creating, both physically and emotionally.
You can generally exaggerate in your animation a lot more than you think you can is one
of the key things to remember. The nature of our human vision is that our eyes can only take in
so much information at a time. When you’re working on a pose, you’re looking at a still image of
that pose, and you can see it in full detail. When that pose is implemented as part of a moving
animated shot, especially when it’s a breakdown pose, that pose is only viewed for (usually)
1/24th of a second. Because of our persistence of vision, our eyes will see less of that most
exaggerated pose, and more of the frames on either side of that pose that are less exaggerated
versions of it. Therefore, you need to push the pose further than you think, when you are creating
it. It’s much harder to over-exaggerate, than it is to under-exaggerate.
Relationship of Exaggeration in some Principles of Animation
Squash and Stretch
Contrast is the name of the game with squash and stretch. When you have a tight, curled-up pose,
followed directly by a long, stretched-out pose, the contrast between the two generates energy.
By making the squash pose more squashed, and making the stretch pose more stretched, you are
creating more energy and by making more squash and stretch, it is exaggeration
Pay extra attention the Flynn’s head in the Tangled images, the squash and stretch is used
to show the impact as he strikes himself.
 Clips from Tangled
Staging
Exaggeration can help to clarify the storytelling of the shot in terms of staging. Increasing
or decreasing the amount of negative space around a character, or cheating the direction they are
facing, cheating some of the objects that surround a character in order to affect the composition
and draw the viewer’s eye, are a few ways to exaggerate staging. Exaggerating the character’s
posing can be part of this as well, since character poses are a major part of the overall
composition.
Below, it’s a crowded room, but there is enough negative space around Ralph to allow
him to stand out. He is surrounded, yet isolated. His pose intensifies this feeling of self-
consciousness and despair. All of the other characters are facing toward him, which draws the
viewer’s eyes to him as well. The contrast between the light wall color and the dark floor color
also draws our eye to where they meet, which is right behind Ralph.

Clip for Wreck It Ralph

Arcs
Arcs is very important one in exaggeration. . Arcs describe an awful lot of the action. The
main arc of the hips will be the foundation for all other movement your character performs in the
shot. If you exaggerate those arcs, the character will become much more grounded. Sometimes,
you may even need to create arcs where there don’t appear to be any in your reference.
Exaggerate the roundness of the arcs, especially on direction changes, and exaggerate the shape
of arcs through a movement. How the character moves from Point A to Point B is of equal
importance to the golden poses they are moving between.
 Golden poses are the storytelling poses. These need to clearly communicate to the
audience what is happening in the shot, what the character is doing, and how they are feeling and
thinking. These poses do well to have some exaggerated characteristics, such as the “line of
action”. When you push the line of action in a pose, it increases the character’s engagement in
the performance.
 Example of exaggeration from the movie Despicable Me

SOLID DRAWING
Solid drawing is the animation principle which makes the drawing looks Three
dimensional and believable with Volume, Weight and Balance. This requires the knowledge of
drawing a subject three dimensionally. When drawing the cube, avoid making parallel lines. The
lines should be bend towards the vanishing point otherwise it becomes isometric flat cube.

Solid drawing of a box

Weight and Balance
I think about the effect of gravity on the character and how he’s supporting himself.
Make sure he’s in balance and isn’t on the verge of falling over, unless that’s part of the scene.
Twinning
It’s best to avoid symmetry in a pose. If the arms mirror one another, it can make the
drawing look flat. Raise one arm or bring it closer to camera to make it more interesting and
more dimensional.

Example from The Illusion of Life, by Frank Thomas and Ollie Johnston.
Notice that in the drawing of Mickey on the right, his head is forward and his hips are
back. Keep in mind that the entire body should be involved in the pose. When creating a pose,
it’s often a good idea to start with the hips or pelvis, rotating and translating the torso. In the
drawing on the left, Mickey’s torso is straight and vertical, creating a very static and boring pose.
Silhouette
A clear silhouette helps the viewer to instantly understand a pose. You can get a
surprising amount of information such as the gender, age, attitude, costume, etc just from just the
silhouette.
Twists
Twisting the body tends to give more dimension and interest to the pose. This is a
drawing of Timon from a Disney educational film:

Counterpose
When the hips tilt in one direction, the shoulders tend to tilt in the opposite direction to
keep the body in balance.
APPEAL
Appeal makes the character or design stand out. When appeal is added to the design,
Viewer feels realism and it generates further interest. Character should be capable of creating a
pull when presented. Also, they should have charisma.

Example of appeal
Appeal is not only used for the lead characters. But also villain, sidekick and every other
character.
 The Simpsons Handbook shows a clear example of solid drawing from a contemporary
animation. You can again see how in the 'front view' Homer looks very flat and cardboard-cut-
out-like, whereas by placing him at a slight '3/4 front' angle this problem is then solved, and the
illustration becomes once again more realistic and three dimensional.

Homer in front view and ¾ front

20 Tips in Character Design

Character design can be a tricky illustration beast to tackle. You may know how to draw
dynamic characters, but designing your own character from scratch involves a lot of creative
thinking. Although many of the classic characters familiar to us all through cartoons, movies and
advertising look simple, that simplicity usually belies the many hours of work that have gone
into their development.
From Mickey Mouse's famous three-fingered hands – drawn to save production time
when he was first developed for animations in the 1920s – to the elegant simplicity of Homer
Simpson, character design has always been about keeping it simple.
But aside from clean lines and easily readable features, what else are you going to need to
know about character design? There's knowing what to exaggerate and what to play down, what
to add to give a hint of background and depth, and what to do to develop personality.
Getting started can be the trickiest part in any character design project, but once you've
got some ideas these tips will help you breath life into your creation.
01. Decide who your character design is aimed at

Happy Meal box character with saw

Deciding who the character is aimed at should be one of the first steps in your design
process
Think about your audience. Character designs aimed at young children, for example, are
typically designed around basic shapes and bright colors. If you're working for a client, the
character's target audience is usually predetermined, as Aussie artist Nathan Jurevicius explains.
"Commissioned character designs are usually more restrictive but no less creative.
Clients have specific needs but also want me to do my 'thing'. Usually, I'll break down the core
features and personality."
"For example, if the eyes are important then I'll focus the whole design around the face,
making this the key feature that stands out."

02. Decide where your character will appear

Where will the character design be seen and in what medium? This will have a direct
bearing on how you go about your character design. For example, if it's for a mobile-phone
screen, there's no point designing it to have a lot of intricate details and features.
Nathan Jurevicius says that regardless of the format: "The process of thinking up
concepts always starts the same: paper, pencil, green tea... lots of thumbnails, written ideas,
scratches and sketches over sketches."

03. Research other designs

It can be helpful to try and deconstruct why certain character designs work and why some
don't. There's no shortage of research material to be found, with illustrated characters appearing
everywhere: on TV commercials, cereal boxes, shop signs, stickers on fruit, animations on
mobile phones, and more.
 Study these character designs and think about what makes some successful and what in
particular you like about them.

04. Make your character distinctive

Matt Groening used yellow to make The Simpsons characters stand out from the crowd
Whether you're creating a monkey, robot or monster, you can guarantee there are going to
be a hundred other similar creations out there. Your character design needs to be strong and
interesting in a visual sense to get people's attention.
When devising The Simpsons, Matt Groening knew he had to offer the viewer’s
something different. He reckoned that when viewers were flicking through TV channels and
came across the show, the characters' unusually bright yellow skin color would grab their
attention.

05. Use line qualities to describe your character

The drawn lines of which your character design is composed can go some way to
describing it. Thick, even, soft and round lines may suggest an approachable, cute character,
whereas sharp, scratchy and uneven lines might point to an uneasy and erratic character.
Sune Ehlers characters are bold and seem to dance on the page, which echoes his
approach to drawing them. He explains: "Drawing a doodle is about decisive pen-maneuvering.
A strong line for me comes from strength and rhythm."

06. Exaggerate their characteristics

Exaggerating the defining features of your character design will help it appear larger than
life. Exaggerated features will also help viewers to identify the character's key qualities.
Exaggeration is key in cartoon caricatures and helps emphasize certain personality traits.
If your character is strong, don't just give it normal-sized bulging arms, soup them up so that
they're five times as big as they should be.
07. Choose colors carefully
Colors can help communicate a character's personality. Typically, dark colors such as
black, purples and greys depict baddies with malevolent intentions.
Light colors such as white, blues, pinks and yellows express innocence, good and purity.
Comic-book reds, yellows and blues might go some way to giving hero qualities to a character
design.

08. Add accessories

Piggle, a vinyl toy design by TADO, interacts with its accessories

Props and clothing can help to emphasis character traits and their background. For
example, scruffy clothes can be used for poor characters, and lots of diamonds and bling for
tasteless rich ones.
Accessories can also be more literal extensions of your character's personality, such as a
parrot on a pirate's shoulder or a maggot in a ghoul's skull.

09. 2D or 3D
Depending on what you have planned for your character design, you might need to work
out what it will look like from all angles. A seemingly flat character can take on a whole new
persona when seen from the side if, for example, it has a massive beer belly.
If your character is going to exist within a 3D world, as an animation or even as a toy,
working out its height, weight and physical shape is all important.

10. Give your character personality

 Interesting looks alone do not necessarily make for a good character design; its
personality is key as well. A character's personality can be revealed through comic strips and
animations, where we see how it reacts to certain situations.
The personality of your character doesn't have to be particularly agreeable, but it does
need to be interesting. Personality can also be expressed simply in how the character has been
drawn.

11. Focus on facial expression

Picture of Droopy
Facial expression is key to a character's personality, as Tex Avery's Droopy demonstrates.
Expressions showing a character's range of emotions and depicting its ups and downs will further
flesh out your character. Depending on its personality, a figure's emotions might be muted and
wry or explosive and wildly exaggerated.
Classic examples of this can be found in the work of the legendary Tex Avery: the eyes of his
Wild Wolf character often pop out of its head when it's excited. Another example of how
expressions communicate motions is deadpan Droopy, who barely registers any sort of emotion
at all.

12. Give your character design goals and dreams

The driving force behind a character's personality is what it wants to achieve. This
missing something be it riches, a girlfriend or solving a mystery – can help to create the dramatic
thrust behind the stories and adventures your character gets up to. Often the incompleteness or
flaws in a character design are what make it interesting.

13. Build up a back story

If you're planning for your character design to exist within comics and animations then
developing its back story is important. Where it comes from, how it came to exist and any life-
changing events it has experienced are going to help back up the solidity of, and subsequent
belief in, your character.
Sometimes the telling of a character's back story can be more interesting than the
character's present adventures.

14. Experiment
Don't be afraid to experiment and ignore all the rules and tips about planning and crafting
the look of your character design. Going against what is supposed to be the right way of doing
something could create unexpected and exciting results.

15. Make your character design flexible

Having decent materials to work with is useful, but not essential, for the early planning of
your characters design. A lot of amazing characters were successfully designed years ago when
no-one had personal computers and Photoshop was just a dream.
The drawings of your character should still work when rendered on paper with a simple
pen or, as Sune Ehlers puts it: "The character should still be able to work with a stick dipped in
mud and drawn on asphalt."

16. Swap a mouse for a pen

Ian of I like Drawing generates some of his character designs away from both the
computer and the sketchbook, allowing outside elements to influence his work. "I really like
characters that interact with their surroundings," he says.
"The environment normally suggests an idea and then I let my strange mind do the rest. I
prefer drawing in the real world with a pen instead of on the computer, because it feels good and
odd things happen."
17. Get feedback from others
Show people your creations and ask them what they think. Don't just ask whether they
like them or not. Instead, see if they can pick up the personalities and traits of your characters.
Find who you think is the suitable or ideal audience for your work and get feedback specifically
from them about it.

18. Hone, plan and polish your design

A clip from Scary Girl

Creator of Scary Girl Nathan Jurevicius does a lot of preparatory work as part of his
character design process
Instead of just drawing or doodling without too much pre-planning, Nathan Jurevicius
prefers to take a different approach.
"I take a long time creating finished looking roughs and also thinking about how the
character could be expanded beyond a 2D artwork, what the character will do in a specific world,
and how it speaks and acts," he says.

19. Create the right environment

 In the same way that you create a history for your character, you need to create an
environment for it to help further cement believability in your creation. The world in which the
character lives and interacts should in some way make sense to who the character is and what it
gets up to.

20. Fine-tune your figure

Question each element of your creation, especially things such as its facial features. The
slightest alteration can have a great effect on how your character is perceived.
Illustrator Neil McFarland advises: "Think about the meaning of the word 'character'.
You're supposed to breathe life into these things, make them appealing and give them the magic
that will allow people to imagine what they're like to meet and how they might move.
"I think it's strange how creating characters for the sake of it has become a distinct branch of
graphic design."