The 12 Principles of Animation- The Secret of ALL great Animation

The secret behind all GREAT animation is a collection of rules known as the 12 Principles of Animation!

There’s a very good reason why all things associated with animation brings Disney to mind. The Twelve Basic Principles of Animation were introduced by Disney animators Ollie Johnston and Frank Thomas in their 1981 classic The Illusion of Life. Several other wonderful books have been authored on the subject, this seminal work is considered THE animation Bible by students all over the world.

Though published in the 80’s their work is based on principles artists had begun using way back in the 1930s. The goal of this effort was to canonize a set of rules that produced more realistic animation and lifelike, believable characters.

Like many old trades, some methods are not used very much now. Fewer and fewer artists will remember the days of drawing and scanning artwork, pinning sheets of paper to the peg board, checking motion work by carefully ‘flipping’ three or four sheets of animation paper at a time, endlessly sharpening pencils, or inking and painting on celluloid? And what about correcting drafts that were off model? And those dope sheets!! Ah, these tools and techniques, once critical to the career of an animator are like ancient artifacts today.

Traditional animation was deeply connected to an artist’s drawing ability but as animation methods became more and more computerized something kinda wonderful happened- an artist’s ability to make a character “come-to-life” depended less and less on his or her ability to draw. Most forms of computer assisted animation use separate tools and processes to create and ‘animate’ the character. Even so, all motion is animation and most of the 12 principles remain the secret behind all great action and movement.


BEHOLD! The 12 PRINCIPLES OF ANIMATION

1 Squash and stretch- the foundation principle clearly seen in the action of a bouncing ball

2 Anticipation- movement in the OPPOSITE direction before the main action happens

3 Staging- carefully posing the character to show thought, intent or mood

4 Straight Ahead Action and Pose to Pose- two approaches to the drawing process. “Straight ahead action” draws out an action frame-by-frame from beginning to end. “Pose to Pose” starts with a few key frames and fills the inbetweens later.

5 Follow Through and Overlapping Action- physics related movement on a character after the the action has stopped (eg; a cape or ponytail)

6 Slow In and Slow Out- animation looks more realistic if it slows down near the beginning and end of the action

7 Arc- Most natural action follows, not a straight line, but an arched trajectory

8 Secondary Action- swinging his arms, facial expressions or other movement which brings out the personality of the character

9 Timing- makes objects appear to obey the laws of physics based on its weight

10 Exaggeration- pushing beyond real life occurences in both movement and appearance

11 Solid drawing- The classic idea of realistically lighting, shading and drawing a character with anatomically balanced proportions

12 Character Appeal- the equivalence of charisma in an actor and convinces the viewer

It won’t do to just DESCRIBE the 12 principles, but to demonstrate them. 
Check out this animator’s representation of the 12 principles- http://the12principles.tumblr.com/


Let’s take a closer look!

1) Squash and Stretch

source: http://the12principles.tumblr.com

The most important principle is “squash and stretch”, which gives a sense of weight and flexibility to objects. It can be applied to simple objects like a bouncing ball or more complex ones like a face. A character’s entire form may be stretched or squashed for a comical effect. But in realistic action an object’s volume does not change too much when squashed or stretched. If the length of a ball is stretched vertically its width needs to contract horizontally.


2) Anticipation

source: http://the12principles.tumblr.com

Anticipation is used to prepare the audience for an action and to make the action appear more realistic. A dancer jumping off the floor first bends her knees; a golfer swings the club back first, etc. The technique can also be used for less physical actions, such as a character looking off-screen to anticipate someone’s arrival or focusing attention on an object that a character is about to pick up.


3) Staging

source: http://the12principles.tumblr.com

This principle references the idea of theater staging which directs the audience’s attention to what is most important in a scene; Johnston and Thomas defined staging as,

“the presentation of any idea so that it is completely and unmistakably clear”

This can be done in a lot of ways such as the location of a character within the frame, the use of light and shadow, or the camera angle. The main idea of this principle is focusing on what is important and avoiding unnecessary details.


4) Straight Ahead Action and Pose to Pose

source: http://the12principles.tumblr.com

These are two different approaches to the actual animation process. “Straight ahead action” means creating keyframes for a shot frame by frame from beginning to end.

“Pose to pose” goes about animation by establishing the major poses or events of an action and then going back and ‘inbetweening’ later. “Straight ahead animation” creates a more fluid dynamic illusion of movement and is better for producing ultra smooth, realistic action sequences. “Pose to pose” offers the animator more control and works better for dramatic or emotional sequences where composition and relation to the surroundings are of greater importance. Both techniques are often used in both hand-drawn and computer assisted animation.


5) Follow Through and Overlapping Action

source: http://the12principles.tumblr.com

Follow through and overlapping action are two closely related techniques make characters appear to follow the laws of physics. “Follow through” means that loosely tied parts of a body continue moving after the character has stopped. “Overlapping action” is the tendency for parts of the body to move at different rates (an arm will move on different timing of the head and so on). A third, related technique is “drag”, where a character starts to move and parts of him take a few frames to catch up. These parts can be inanimate objects like clothing or the antenna on a car, or parts of the body, such as arms or hair. Exaggerating this technique can create a comical effect.


6) Slow In and Slow Out

source: http://the12principles.tumblr.com

Most objects need time to accelerate and slow down. Action looks realistic if it moves slowly at the beginning and end. This also goes for characters and objects moving between two extreme poses.


7) Arc

source: http://the12principles.tumblr.com

Most natural action tends to follow an arched trajectory. Animating along “arcs” makes for sequences with greater realism. This technique can be applied to limbs and projectiles. Arc tend to straighten out as an object’s speed increases.

An object in motion that moves out of its natural arc for no apparent reason will appear erratic. This can have great comical effect, if intended, but generally action that moves along arcs should smoothly start and end along a smooth path.


8) Secondary Action

source: http://the12principles.tumblr.com

Secondary actions should emphasize the main action. Adding secondary actions to the main action gives a scene more life, and can help to support the main action.


9) Timing

source: http://the12principles.tumblr.com

Timing refers to the amount of time it takes for an action to be completed. Correct timing makes objects appear to obey the laws of physics. Typically an object’s weight determines how it reacts to being pushed. In regards to acting, timing is critical for establishing a character’s mood, emotion, and reaction. It can also show aspects of a character’s intelligence or personality.


10) Exaggeration

source: http://the12principles.tumblr.com

Exaggeration is especially useful for animation because realistic movement can look pretty boring on screen. It is important to use some restraint with exaggeration.There should be a balance in how much elements are exaggerating in their movement to avoid overwhelming the viewer.


11) Solid drawing

source: http://the12principles.tumblr.com

The principle of solid drawing means taking into account forms in three-dimensional space, or giving them volume and weight. The animator needs to be a skilled artist and has to understand the basics of three-dimensional shapes, anatomy, weight, balance, light and shadow, etc. For the classical animator, this involved taking art classes and doing sketches from life. One thing in particular that Johnston and Thomas warned against was creating “twins”: characters whose left and right sides mirrored each other, and looked lifeless. Modern-day computer animators draw less because of the facilities computers give them, yet their work benefits greatly from a basic understanding of animation principles, and their additions to basic computer animation.


12) Appeal

source: http://the12principles.tumblr.com

Appeal is to a cartoon character what charisma is to an actor. A character who is appealing is not just well illustrated or even sympathetic — villains or monsters can be (and should be) ‘appealing’ . The important thing is that the viewer feels the character is real and interesting.