Animation principles form the basis of all movement work.
The 12 principles of animation were first introduced by Disney animators Ollie Johnston and Frank Thomas in their book The Illusion of Life: Disney Animation , which was originally released in 1981. In this book, Johnston and Thomas examine the work of Disney’s leading animators from the 1930s and beyond, narrowing their focus to 12 basic animation principles.
These principles form the basis of all animation work. They are relevant to several different fields. The most obvious use is to animate the design of a character, but these rules are also an invaluable guide in web design, for example, if you want to introduce movement into your interface with some CSS animation.
In this article, we’ll take a closer look at each animation principle, with helpful GIFs from Vincenzo Lodigiani , who also made the short video The Illusion of Life
Observe the principles and techniques of animation with examples
Once you understand these 12 animation principles, you can take your movement work to the next level. These are the principles and what they mean:
01. Pumpkin and stretching.
The principle of squash and stretching is considered the most important of the 12 principles of animation. When applied, it gives your 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 when it travels up and down and flattens when it hits the ground.
When using squash and stretching, it is important to keep the volume of the object constant. So when you stretch something, you need to slim down, and when you squash something, you need to enlarge it.
02. Anticipation.
Anticipation helps prepare the viewer for what is to come. When applied, it has the effect of making the action of the object more realistic.
Consider what it might look like if you were to jump into the air without bending your knees, or perhaps throw a ball without first pulling your arm back. It would seem very unnatural (it may not even be possible to jump without bending your knees!). In the same way, animating movements without a spark of anticipation will also make your movement appear awkward, stale, and lifeless.
03. staging
Staging in animation is very similar to composition in a work of art. What we mean by that is that you should use movement to guide the viewer’s eye and draw attention to what is important within the scene. Keep the focus on what is important within the scene and keep the movement of anything that is not of importance to a minimum.
04. Straight action and pose to pose.
There are two ways to handle drawing animation: straight and pose to pose. Each has its own benefits, and the two approaches are often combined. Direct action involves drawing frame by frame from start to finish. If you are looking for realistic and fluid movements, direct action is your best option.
Using the pose-to-pose technique, draw the starting frame, the ending frame, and a few key frames in between. Then you go back and complete the rest. This technique gives you a little more control within the scene and allows you to increase the dramatic effect of the movement.
05. Follow-up and overlap action.
When objects stop after being in motion, different parts of the object will stop at different speeds. Similarly, not everything in an object will move at the same speed. This forms the essence of the fifth of Disney’s animation principles.
If your character is running through the scene, his arms and legs may be moving at a different speed than his head. This is an overlapping action. Similarly, when they stop running, their hair will likely continue to move for a few frames before resting, this is a follow-up. These are important principles that you must understand if you want your animation to flow realistically.
06. Slow and slow
The best way to understand slowness and sluggishness is to think about how a car starts and stops. It will begin to move slowly, before gaining momentum and accelerating. The opposite will happen when the car brakes. In animation, this effect is achieved by adding more frames to the beginning and end of an action sequence. Apply this principle to give your objects more life.
07. Bow
When working in animation, it is best to stick to the laws of physics. Most objects follow an arc or path when they move, and your animations should reflect that arc. For example, when you throw a ball into the air, it follows a natural arc as the effects of Earth’s gravity act on it.
08. Secondary action.
Secondary actions are used to support or emphasize the main action that occurs within a scene. Adding secondary actions helps add more dimension to your characters and items.
For example, the subtle movement of your character’s hair while walking, or perhaps a facial expression or secondary object that reacts to the former. Whatever the case, this secondary action should not distract from the primary.
09. time
For this animation principle, we must observe the laws of physics again and apply what we see in the natural world to our animations. In this case, the focus is on time.
If you move an object faster or slower than it would naturally move in the real world, the effect won’t be believable. Using the correct timing allows you to control the mood and reaction of your characters and objects. That’s not to say you can’t push things a bit (especially if you’re creating an imaginary world), but if you do, be consistent.
10. Exaggeration
Too much realism can ruin an animation, making it look static and boring. Instead, add some exaggeration to your characters and items to make them more dynamic. Find ways to push the limits beyond what’s possible, and your animations will appear.
11. solid drawing
You need to understand the basics of drawing. This includes knowing drawin three-dimensional space and understand shape and anatomy, weight and volume, and light and shadow.
While you can push the limits here too, it’s important that you stay consistent. If your world has crooked doors and a distorted perspective, keep that perspective throughout the entire animation. Otherwise things will fall apart.
12. Appeal
Your characters, objects, and the world they live in need to attract the viewer. This includes having an easy-to-read layout, a solid drawing, and a personality. There is no formula for getting it right, but it starts with strong character development and being able to tell your story through the art of animation.