Jump to topic on this page:
Find in video:
0:44
1:05
1:39
2:41
3:31
4:06
5:19
6:08
6:36
7:10
The principles of animation were first coined by Disney animators, Ollie Johnston and Frank Thomas, in their 1981 book, The Illusion of Life. As the title of the book suggests, the goal of the principles of animation is to make moving illustrations believable; to give them the illusion of life.
Even though technology has changed since the book came out, and the principles were originally based on cartoon style animation, most of these principles are still very much relevant to modern motion design. But with that in mind, we’ll be working off a modified list of principles.
The principles of Slow In & Out is often called “easing” by motion designers. Motion that starts slow, speeds up, then slows down before it comes to a stop, is more pleasing to the eye than linear motion because it can be more realistic to how living things move in real life.
Not sure how to adjust the easing of your keyframes? This class covers everything you need to know.
Check out the ClassStaging means directing the audience’s attention toward the most important element or elements in a scene to effectively communicate a message. Staging in animation is similar to composition in artwork.
There are multiple ways to lead the viewer's eye to the most important aspects of your animation.
We’ll tend to look at the biggest, brightest, or fastest moving element in a scene. So you can use size, color, or speed to direct the viewers eye where you want them to look.
Doing a good job of staging, can help make complicated scenes easy to follow.
The principle of animation known as arcs has to do with spatial interpolation. In real life, things often move in the shape of an arc because of gravity or anatomy.
For example, a ball being thrown or bouncing moves in the shape of an arc.
Usually, the faster something moves, the more straight it’s trajectory is. Think of a friendly game of catch verses a major league baseball player throwing the ball as hard as they can.
In this example, I made the hummingbird’s movement look more realistic by animating it in an arc. Hummingbirds are known to be fast though, so if I was animating it beelining across the screen and wanted to show how fast it was moving, I would animate it in a straight line. Its tail and the flower also make an arc shape when rotating because of the way they are anchored.
In some cases, things move in the shape of an arc because of their structure. When layers are parented together, animating in arcs happens automatically.
Another example of this is when a person walks, their arms swing in an arc shape because of the way they’re connected to the body. The feet move in an arc shape for the part when they’re off the ground. And the hips move in a series of arcs.
Anticipation is a movement just before the main action that’s in the opposite direction of the main action. You can think of it as the wind-up or the pre-action. Anticipation serves as a visual cue as to what’s about to happen. It draws the viewer’s attention to an object so the viewer looks at that object and doesn’t miss the main action.
Anticipation can be used to make animations look more realistic or more cartoony.
Realistic
In this cooking veggies animation, the hand moves down in anticipation of flipping the veggies.
Cartoony
This avocado character bends his knees in anticipation of doing something as simple as a wave that doesn’t actually require bending knees.
Follow-through is kind of like the opposite of anticipation. It’s an action that overshoots or goes past the end pose or state. Follow-through is a post-action or a recovery from the main action.
Follow through is natural so adding it to your animations can make them look more realistic. Or, it can make objects look more floppy and therefore cartoony.
Overlapping action is the movement of things that flop, flow, flap, and follow behind the central mass of the subject. It’s usually something the character or object you’re animating is doing involuntarily. But that doesn’t mean that it happens automatically…You still have to animate it!
Overlapping action is due to the way things are structured, the momentum from the primary action, and the laws of physics. Think of it like a chain reaction and consider this for how things should be parented in After Effects.
Notice how the stem of the vine bends and the leaves rotate. The rotation of the leaves lags slightly behind the bend of the stem.
The motion of the girl's head, hair, earrings, and shirt blowing in the wind as well as the bouncing basket and dog's ears are examples of overlapping action.
Secondary animations are animated details that support the main action. Think of it like layering animations. These smaller, secondary animations embellish or enhance the main action so that the overall animation is more realistic and has more personality.
Primary action: lifting weights
Secondary action: facial expression
Primary action: flapping fins to swim (the way the fins bend would be considered overlapping action)
Secondary action: blinking, breathing (bubbles) even though these are likely involuntary for the turtle
Squash and stretch is when an object is animated to expand and compress to give it the illusion of weight or flexibility.
You can use squash and stretch to indicate what an object is made of; whether it’s hard as a rock or squishy like rubber. When animating squash and stretch, consider what material the object is made of and how it would behave in real life. You can exaggerate this motion if you’re going for a more cartoony look.
Smears are a way to emphasize movement and add personality to an animation.
Smears were not actually on the original list of Disney’s 12 principles of animation, but they were invented by animators at the time who drew each frame to create an animation. These animators needed a way to indicate that something was moving quickly between frames. They didn’t have After Effects with a motion blur switch to turn on. So, instead they came up with the idea to draw an elongated version of an object to emphasize how fast it was moving.
Although the techniques to achieve smears have changed, it’s a look that’s stuck around in modern motion design.
All of the principles of animation we’ve covered so far can be applied to make your animations more lively and realistic. By pushing the boundaries of what's realistic, you can add personality and expressiveness to an animation and give it more of a cartoony feel.
Think of it like a spectrum:
On one end, an animation doesn’t use any of the principles of animation and only uses linear keyframes. It looks dull and practically lifeless.
As more care is put into perfecting the timing and spacing of keyframes and principles of animation are used, the animation becomes more realistic and lifelike.
If you push the boundaries of physics and exaggerate the motion or principles of animation, the animation becomes more playful and cartoony.
Dive deeper in to the principles of animation while creating a custom logo animation in my class, Bring a Logo to Life: Principles of Animation for Motion Designers. Throughout this class, I guide you through exercises (shown below) to practice applying each animation principle. And, I break down how the principles of animation were used in numerous logo examples.
Not only will you come away from the class with a custom animated logo, but you’ll have a deeper understanding of how to utilize animation principles to communicate ideas and emotions through movement, in any motion design project.
Check out the class trailer:
