The 12 Principles of Animation

When you make an animation, whether it’s a logo animation or anything else, the goal is to create something that truly “lives.” Not necessarily that it’s realistic, but that it looks alive, that it works visually, and that it conveys the right emotions.

To achieve these goals, professional motion designers use, among others, the so-called “12 principles of animation.”

This is a set of rules that allow you to make your animations more convincing. I assure you that when I started applying these principles I immediately noticed that the quality of my animations had improved significantly.

These principles are valid for all animation projects, including of course logos and other motion graphics projects. So let’s first see where these principles come from, and then I’ll explain them to you one by one.

Where they came from and how to use them

The  12 principles of animation are those principles theorized and explained since the 80s by the two historic Disney animators Ollie Johnston and Frank Thomas.

If you don’t know who they are, well, just know that they worked on almost all the greatest masterpieces from the 30s to the 70s, from  Snow White  to  Robin Hood, through  Pinocchio,  Fantasia,  Bambi,  Cinderella,  Alice in Wonderland,  Peter Pan,  The Sword in the Stone and so on.

They are among the members of the almost mythical  “Nine Old Men “, the name with which the nine historical animators of Walt Disney (some later directors) are remembered, creators of the most famous Disney works.

In 1981 Johnston and Thomas published “The illusion of life”, a book considered a true bible of the sector, where they collected all their knowledge on animation and where they introduced, precisely, the so-called 12 principles of animation.

The working techniques that Ollie and Frank describe in their text are the result of the experience accumulated by Disney animators since the 1930s to produce the cartoon animations that we all know.

The purpose of these principles was to produce the illusion of characters adhering to the fundamental laws of physics . They are also useful for more abstract matters, such as conveying emotion and character personality.

Originally these principles were applied to traditional, hand-drawn animation (frame by frame). But we can say that they are also completely valid today , even for 2D, 3D, stop motion, motion graphics and logo animation .

In short, whether it is traditional animation or otherwise, all techniques must respect these sacred twelve principles.

It is important to clarify, however: these principles are not mathematical formulas that are valid for all types of animation. Each animation obviously has its own style and it is up to the animator’s ability to apply them correctly or not.

The 12 Principles of Animation

Here are the 12 principles of animation:

1. Deformation (compression and expansion)
2. Anticipation
3. Staging
4. Direct action and pose
5. Follow the action
6. Movement speed
7. Arches
8. Secondary actions
9. Timings
10. Exaggeration
11. Body volume
12. Attractiveness (appeal)

Let’s analyze them one by one to understand how they work and how to apply them.

1. Compression and dilation (squash and stretch)

The principle of squash and stretching is considered one of the most important. It is used to give animated characters and objects the illusion of gravity, weight, mass and flexibility.

Think about how a bouncing rubber ball might react when thrown into the air: the ball stretches as it goes up and down , and flattens when it hits the ground .

When using it is important to keep the volume of the object consistent. Although at normal speed it is difficult to notice these transformations, at an unconscious level they help a lot to make the movements more plausible and dynamic.

2. Preview

We talk about anticipation whenever a character, or any element of animation , prepares the viewer for an action by anticipating it with another action. Anticipation is also used to make the action as realistic and clear as possible.

Let me give you an example: you couldn’t jump in the air without bending your knees first, or throw a ball without first pulling your arm back. These are all gestures that anticipate the action:‌ that’s why animating movements without a minimum of anticipation makes them awkward, stale and lifeless.

3. Staging​

It is a fundamental principle for theater or cinema as well as for animation. It consists of guiding the viewer’s attention to the main action using shots and movements.

To achieve this, it is important to place the main action in the center or a third of the frame, but also try not to overlap the movements of the characters and objects to avoid creating chaos.
​Staging in animation is very similar to composition in art.

Try to keep the focus on what is important within the scene and keep secondary movements to a minimum.

4. Direct action and pose (straight aheadand pose to pose)

There are two ways to handle drawing animation: straight ahead or pose to pose. Each has its advantages and the two approaches are often combined.

• Straight ahead: This basically means drawing frame by frame from start to finish, drawing them in temporal order one after the other. If you want to create fluid and realistic movements (for example, splashes, fluids or explosions) this is the best solution.
• Pose (pose to pose): This technique instead consists of drawing the initial frame, the final frame and some key frames in between. Then, after creating these keyframes, you create the remaining ones to complete the animation. This method gives you a little more control within the scene and allows you to increase the effect of the movement.

5. Follow throughand overlappingaction

In every movement not all parts of the object stop at the same time. When the main body stops everything attached to it continues to move slightly.

Reproducing this phenomenon gives us information about the physical characteristics of objects , helps to make movement more realistic and to give the impression that objects follow the laws of physics, such as the principle of inertia .

The elements we are talking about can be:

• inanimate objects : items of clothing, the antenna on a car, etc;
• body parts : such as a dog’s hair or loose skin.

6. Speed ​​of movements (slow inand slow out)

The motion of objects in the real world , such as the human body, animals, vehicles, etc., takes time to accelerate and slow down. Every gesture starts slowly , reaches a uniform speed in the middle of the action , and then slows down at the end of it.

The best way to understand how slow in and slow out works is to think about how a car starts and stops. It starts moving slowly, before accelerating and gaining speed. When the car then brakes, the opposite happens.

This technique is fundamental in motion design because it is of great help in making movements soft and physically believable . If this principle were not applied to animations , the robot effect would be guaranteed!

7. Arches

When working in animation, as you may have realized by now, it helps to respect the laws of physics.
​Most moving objects follow an arc or curved path – your animations should reflect that arc, too.

When a head turns or an arm moves , it almost never moves straight ahead; more often it makes a small curve, or, for example, when you throw a ball into the air, it follows a natural arc due to the Earth’s gravity. If you reproduce it this way, the action will be more fluid and realistic.

8. Secondary actions

Secondary actions are used to support or emphasize the main action that is taking place within a scene. Adding secondary actions helps a lot in characterizing characters and objects, because they give personality to the animation.

Let me give you an example: the subtle movement of your character’s hair as he walks, or a facial expression or a secondary object that reacts to the main one.

Whatever the case, this secondary action must not distract from the primary one.

9. Timing of actions (timing)

Timing refers to the speed of an action : with more drawings or key frames you get a slower action, with fewer drawings instead it is faster. The sense of the action changes a lot depending on the speed .

Knowing this principle is very important when working frame by frame . By adjusting the timing and frames in a scene, animators can make it slower and smoother (with more frames) or faster and snappier (with fewer frames).

10. Exaggeration

Paradoxically, if we created a character or an object that behaves as in reality, in the end the scene would not be very natural. If instead we exaggerate its physical characteristics , its movements , its emotions , the scene is much more captivating .

Too much realism can ruin an animation, making it look static and boring. Add a little exaggeration to your characters and objects to make them more dynamic.

11. Volume of bodies (solid drawing)

Never forget the basic principles of three-dimensional drawing: shape, anatomy, weight, volume, light and shadow.

Giving the impression that the action is taking place in a three-dimensional space can be very appealing for an animation. For this reason, even everything that is 2D must still have a sufficient 3D effect and suggest that its shape occupies an actual three-dimensional space .

12. Attractiveness (appeal)

Characters, objects and the world they live in must attract the viewer’s attention , their design and personality must be interesting and charismatic . There is no scientific formula to achieve this principle, but this is where the art of the animator lies : giving personality to movements and elements.