What are the 12 Principles of Animation?

The 12 Principles of Animation are the most crucial techniques you must master as an animator. Created in the 1930s (and first introduced in The Illusion of Life: Disney Animation) by the pioneers of animation, Frank Thomas and Ollie Johnston, these 12 principles of animation adhere to the basic laws of physics and also account for emotions and appeal.

While originally developed for pencil sketching, the same principles apply to digital animation as well. They should be your ultimate guide for creating appealing and realistic character animations. 

1. Timing and Spacing

2. Squash and Stretch

3. Anticipation

4. Ease In and Ease Out

5. Follow Through and Overlapping Action

6. Arcs

7. Exaggeration

8. Solid Drawing

9. Appeal

10. Straight Ahead Action and Pose to Pose

11. Secondary Action

12. Staging

Timing and Spacing in animation is what gives objects and characters the illusion of moving within the laws of physics. 

Timing refers to the number of frames between two poses, or the speed of action. For example, if a ball travels from screen left to screen right in 24 frames, that would be timing. It takes 24 frames or 1 second (if you’re working within the film rate of 24 rates per second) for the ball to reach the other side of the screen. Timing can also establish mood, emotion, and personality.

Spacing refers to how those individual frames are placed. For instance, in the same example, the spacing would be how the ball is positioned in the other 23 frames. If the spacing is close together, the ball moves slower. If the spacing is further apart, the ball moves faster.

Squash and stretch is what gives flexibility to objects. The easiest way to understand how squash and stretch work is to look at a bouncing ball. As the ball starts to fall and picks up speed, the ball will stretch out just before impact.

As the ball impacts the ground, it squashes before stretching again as it takes off. Please note, the volume of an object doesn’t change. In the case of the ball, when it is squashed or stretched, the width and depth need to correspond accordingly.

There’s a lot of examples of “squash and stretch” happening in real life that you may not notice. For instance, squashing and stretching occurs in the face when someone speaks because the face is very flexible. In animation, this can be exaggerated. Squash and stretch can be implemented in many different areas of animation to add comical effect or more appeal, like for the eyes during a blink or when someone gets surprised or scared.

Anticipation is used in animation to set the audience up for an action that is about to happen, and is required to sell believable movements.

An easy way to think about this is before a baseball player pitches the ball, they first need to move their entire body and arm backward to gain enough energy to throw the ball forward. So, if an animated person needs to move forward, they first must move back. Or, if a character is reaching for a glass on a table, they must first move their hand back. This not only gets up their momentum, but it lets the audience know this person is about to move.

Other cases where anticipation is used include when a character looks off screen when someone is arriving, or when a character’s attention is focused on something they are about to do.

As any object moves or comes to a stop, there needs to be a time for acceleration and deceleration. Without ease in and ease out (or slow in and slow out), movements become very unnatural and robotic. 

As a car moves away from a stop, it doesn’t just reach full speed in an instant. It must first gain speed. As it comes to a stop, it doesn’t go from sixty to zero in the blink of an eye. Instead, it slows down until it reaches a complete stop. 

The same must be accomplished in animation and the easiest way to accomplish ease in and ease out is to utilize the principle of spacing. As a character stands up from a sitting position, the spacing of each pose will be closer together at the start so that they can ease into the movement. As they stand up, they will ease out of the movement by spacing the poses further apart at the end of the action. Without this acceleration and deceleration of actions, everything would be very abrupt and jerky.

Follow through is the idea that separate parts of the body will continue moving after the character has come to a stop. As a character comes to a stop from a walk, the arms may continue forward before settling in a down position. This could also be the case with articles of clothing.

Overlapping action (also called “drag” or “lead and follow”)  is very similar in that it means different parts of the body will move at different times. An example of overlapping action is when a character raises their arm up to wave: The shoulder will move first, then the arm, and then the elbow, before the hand lags behind a few frames. You can also see this when a blade of grass waves in the wind. The base moves first and then the rest of the grass follows behind at different rates, giving it that waving motion.

Additionally, characters who are remaining still need to display some sort of movement (blinking eyes, breathing, etc.) to prevent the animation from becoming “dead.” This is called “moving hold.”  

Everything in real life typically moves in some type of arcing motion. Since it's unnatural for people to move in straight lines, you should adhere to this principle of animation to ensure you get smooth, realistic movements. The quicker something moves, the flatter the arc and the broader the turn. The only time something would move in a perfectly straight line is a robot. 

If a character is turning his head, he will dip his head down during the turn to create an arcing motion. You also want to ensure that more subtle things move in arcs. For example, when a character walks, even the tips of their toes should move in a rounded, arcing motion.

Exaggeration is used to push movements further, adding more appeal to an action, and should always be implemented to some degree. 

Exaggeration can be used to create extremely cartoony movements including physical alterations or supernatural elements. Or, exaggeration can be incorporated with a little more restraint for more realistic actions. But, even then you can still use exaggeration to make a more readable or fun movement while still staying true to reality.

So, if a character is preparing to jump off a diving board, you can push them down just a little bit further before they leap off. Alternatively, you can use exaggeration in the timing to enhance different movements or help sell the weight of a character or object.

In 2D animation, solid drawing is about creating an accurate drawing in terms of volume and weight, balance, shadow, and the anatomy in a pose. With 3D animation, animators need to think about how to pose out your 3D character rig to ensure there is correct balance and weight, as well as a clear silhouette.

Avoid “twinning,” which is creating a mirrored pose across to the other side (both arms on hips or both hands in pockets) because this creates a rather boring and unappealing pose.

This principle can really come down to adding more appeal (charisma) in many different areas of your animation, such as in posing. The most obvious example, however, is appeal in the character design because you want to have a character that the audience can connect with or relate to, whereas a complicated or confusing character design can lack appeal.

You can find areas on the character to push and exaggerate in order to create a more unique design that will stick out in your audience’s memory. One example is to simply exaggerate the jawline or push the youthfulness in the eyes. Either of these can help create more appeal. 

Keep in mind that appeal is also required for villains. 

Straight ahead action is a very spontaneous and linear approach to animating and is animated from start to finish, frame by frame. With this, you’ll create each pose of the animation one after the other. So, if your character is landing on the ground after jumping in the air, you would create the poses where he is standing, then the poses where he is beginning to kneel down, and then completely crouched. In other words, you’re really working through the animation as you’re going to make quick action fluid and dynamic.

With pose to pose, the animation is much more methodical, with just the most important poses required to properly tell the story. You would animate the character landing on the ground after jumping in the air by using fewer poses (standing and crouched). This allows for more simple work and ensures the proportions and timing are correct before you add more intervals later, and is great for slow, dramatic, or emotional scenes.

Often, these two approaches are used in combination to great effect.

Secondary action refers to the actions that support or emphasize the main action to breathe more life into the animation and create a more convincing performance. It’s important to remember that the secondary action should typically be something subtle that doesn’t detract from the main action happening (perhaps even thought of as a subconscious action). For this reason, dramatic movements take priority over things like facial expressions.

Let’s say a character is talking to another character in a waiting room. The two of them talking would be the main action, but if one of them begins tapping their foot nervously, that would be the secondary action. Other examples would be a character whistling, leaning on a wall, or crossing their arms while a primary action is taking place.

Staging is how you go about setting up your scene, from the placement of the characters, to the background and foreground elements, the character’s mood, and how the camera angle is set up. Staging is used to make the purpose of the animation unmistakably clear to the viewer. You want to keep the focus on what you want to communicate to the audience (and avoid unnecessary detail) so they don’t become confused.