So, what are the 12 Basic Principles of Animation and why should you care about them? The goal of the principles is to bring life and excitement to any animation – to take the mediocre and make it exceptional. Originally created by Disney animators for hand drawn animation, these are principles that anyone hoping to create quality animations should know and use.
Long ago, probably before you or I knew the meaning of the word “animation,” two of the great original Disney animators, Frank Thomas and Ollie Johnston, compiled a book based on their many years of experience in pioneering the art form. “The Illusion of Life: Disney Animation,” is still considered to be the “gospel” of the animation industry, and gave the world its first official introduction to the 12 Basic Principles of Animation.
While they were originally meant for hand-drawn animation, these principles are still greatly beneficial in computer animation, whether you are animating a character or a logo. So, here they are, along with some ways in which they apply specifically to After Effects.
1. SLOW IN/SLOW OUT
We'll get the easiest one out of the way first! We know that objects don't immediately spring into motion at full speed, or come to dead stops; they accelerate and decelerate. Most After Effects users are already familiar with this principle, thanks to the built-in "Easy Ease In/Out" functions.
Straight out of the box, hitting "F9" with a keyframe selected (or right-clicking to pull up the context menu) is a big step toward creating fluid movement, but there are other tools that can take this to the next level as well. I prefer, and strongly recommend, Ease and Wizz by Ian Haigh.
In the real world, when a movement occurs, it is often preceded by a movement in the opposite direction. This can be a drastic movement or a subtle one. For example, a leaping dancer will travel downward before she leaps upward, and a golfer will swing the club backward before swinging it forward. In animation, this is called anticipation. A good way to think of it is that you're preparing the audience for the coming action, even if it's subconsciously.
Applying this principle to your animated layers can be extremely beneficial in creating interesting motion that is full of life. In After Effects, this generally means adding a few more keyframes to your animations than you'd normally create. There may also be scripts for this, but I find that, in most cases, nothing beats doing it the old fashioned way.SIDE NOTE: In a perfect example of being able to break the rules once you've learned them, intentionally omitting the anticipation action can be a good way of creating surprise. For example, an unexpected "pie in the face" type gag can be much funnier without any leading action.
3. SQUASH & STRETCH
Squashing and stretching an object's scale as it moves can help make your animation feel more organic (and sometimes comical). In complex motion, this might seem pretty daunting, but even the addition of some subtle squash & stretch can bring the most boring animation to life. The general rule is to not to change the object's volume as you change it's shape (which means that if you stretch it longer vertically, you should squash it shorter horizontally).
This simple principle states that, in nature, objects tend to move along an arc - not a straight line (with the exception of mechanical objects). Think of a pendulum swinging, a child doing jumping jacks, or a man being launched from a cannon. Pretty straight-forward, right? Fortunately, this can be easily achieved in After Effects by animating along a path.
5. STRAIGHT AHEAD ACTION vs POSE TO POSE
>This principle is one that applies almost entirely to drawing animations the old-fashioned way, but has greatly influenced the way we animate today. "Straight Ahead Action" refers to drawing out frames, one by one, in order. "Pose to Pose" refers to a method of drawing the "key" poses first, and then filling in the frames in between. This is where we get the terms "keyframe" and "tweening."
Here is an interesting look at some old-school "Pose to Pose" animation
"Staging" refers to the act of directing the audience's attention to the important actions and events in your animation. This involves proper camera placement, edits, color selection, layout, etc. Whether you're creating a title sequence, an animated short, or a local TV commercial, it is necessary to set your "stage" to deliver the intended message, in the same way that a film director would. This means that having a solid grasp on composition is vital to motion design. Understanding balance, harmony, emphasis, and rhythm can greatly enhance your ability to tell a story through animation.
SIDE NOTE: Staging can also be used as a form of anticipation, by using the camera to lead an action (for example, zooming in to frame an object just before it explodes).
This principle is based on the idea that "more realistic" is not always better, and that sometimes trying to exactly imitate nature can produce results that are stiff and boring. Exaggerating the right movements at the right times can create animation that is much more interesting. Chances are, you're already implementing exaggeration whether you realize it or not. Simply being aware of the principle, though, can help you to make more educated decisions about how much exaggeration to use and when to use it.
8. FOLLOW THROUGH/OVERLAPPING ACTION
This principle deals with the way that multiple actions affect each other. "Follow through" refers to the way an object and its parts continue to move at the end of an action, and lag at the beginning of an action. Some examples are the way the driver of a car continues to move forward after slamming on the brakes, or a long cloak does not begin to move until slightly after the person wearing it does. "Overlapping action" refers to the idea that one action doesn't have to stop before the next action, like a change in direction, begins.
9. SECONDARY ACTION
While this principle sounds similar to the previous one, it is different in that, while "follow through" and "overlapping action" deal largely with physics, "secondary action" deals more with adding interest to a scene, by enhancing the main action. For example, while a man walks down the street, his primary action is the walk itself. The secondary action could be the swinging of his arms, a tip of his hat, a scratch of his nose, or all of these. Secondary action should bring interest to an action, but should not overshadow the primary action.
It may be easy to figure out what this principle means - it's simply the speed with which your objects move - but it seems to be one of the hardest to master. The timing or speed of an action can drastically alter the emotion of that action. It can also affect other things, such as the perception of an object's weight. Moving an object slowly makes it seem large and heavy, while moving it quickly makes it appear lighter. In After Effects, think of the implications this could have if your layer is a logo. You could suggest that a company is a massive, dominant player in its industry, or that it is versatile and light on its feet, with nothing more than the distance between two keyframes.
11. SOLID DRAWING
This is pretty self-explanatory, and refers to correctly conveying weight, form, and movement in drawings. It is the one principle that really doesn't apply much at all to After Effects, unless you're using some other software to draw images and then animating them in After Effects - in which case, it still applies more to the other software than it does After Effects, so...HA! I was right the first time.
This principle originally instructed animators to make sure that the characters they designed for their animations had charisma, or appeal. Its core idea is that the most incredible animation technique in the world will mean nothing unless the characters are interesting enough to draw in the audience. This may seem completely irrelevant to anyone who isn't a character animator, but I believe its concepts can be applied to all motion design.
In everything you create, it is important to consider the visual appeal of the elements you are animating. After all, the audience has to enjoy looking at your creation. It doesn't matter how technically advanced it is if it's boring to watch. Some of the most beautiful pieces can require little more than a fundamental usage of After Effects.
And that's why this principle works well as the last one, because it can just about trump all of the others. So, if you've got six-page expressions nailed and can create a complete fluid simulation script in TextEdit, but haven't spent much time improving your design skills, now is a great time to start.
And, that's it! You're now an expert on the 12 Basic Principles of Animation, something that I hope will serve you for your entire career in motion design. If you'd really like to dig into these even more deeply, grab a copy of The Illusion of Life: Disney Animation. And now that you know who Frank and Ollie are, these cameos in Brad Bird's animated films should make a little more sense to you!
I can't wait to see what you create.
Subscribe below and we’ll send you a weekly email summary of all new 3D & Motion Graphics tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post