12 Principles of Animation (Official Full Series)

Hey, guys. . .

So, I decided to make a video series dedicated to the 12 principles of animation, as described by the legendary animators Frank Thomas and Ollie Johnston. So the first principle is "squash and stretch". This is the principle that animated objects will get longer or flatter to emphasize their speed, momentum, weight, and mass.

Here's a bouncing ball that has squash and stretch. And here is one without squash and stretch. See the difference?

The amount that an object squashes and stretches says something about its mass. The more squash and stretch, the softer the object. The less squash and stretch, the stiffer the object.

This first one looks like a water balloon and the second one probably would be a bowling ball. Squash and stretch applies to characters, too. Look at how this figure is stretching from the speed that he's coming down with, and then he squashes after he lands before settling in his pose.

You can also use squash and stretch to exaggerate facial expressions. Let's add some squash and stretch to this face: when his eyes are closed, his face is squashed, and when he opens his eyes in disbelief, his face stretches up and settles back to normal. It's very important to keep the volume of the object consistent.

This is what a lot of people mess up with when they're first trying to do "squash and stretch". They'll elongate the ball like this, and flatten it like this. This is what you should NOT do.

The overall volume of the ball must be the same: so as the ball gets longer, it also gets narrower; when it gets flatter, it also gets wider. The same goes with cubes. If you're going in with one line, the other lines must go in the opposite direction.

The cube should start out narrow, get flat, get narrow again, and then rest. In -betweening with cubes is easy because you can measure the line in between the two lines and then connect them to make the cube. If you master "squash and stretch" with cubes, the next step is to try to do it in 3D.

Another important note is that the ball does not have to be stretching the entire time that it's falling. When it's just starting to fall, it should have its normal shape for the most part, and then when it's just about to hit the bottom, that's when it has the most stretch. So, do not overdo "squash and stretch" in this sense.

Alright! The second principle of animation is called Anticipation. This is when a character prepares for an action to give the audience a clue as to what is happening next As well as to make the action appear more realistic.

One example is when a character is about to jump. Before leaping into the air, he has to prepare for the action by crouching down to build energy. It's like a spring that coils up before releasing.

Look at this character jumping without any anticipation. It looks very unrealistic because the energy to jump comes out of nowhere. Here's another example: a punch.

To add power to the punch and communicate to the viewers that he is about to punch. He reaches his arm back and then punches. By contrast having no anticipation results in a very weak punch.

You'll see this in a lot of cartoons before running a character will wind up, before taking off. In the previous video about squash and stretch this face actually uses anticipation as well. Instead of immediately stretching up, the face squashes first to anticipate the stretch and give it more power.

Anticipation helps communicate actions to the audience by preparing them for the next action. This can happen in many ways If a character is about to take something out of their pocket. They make their hand very visible and up in the air before going into the pocket.

Otherwise the audience might miss it and wonder how they got that object in the first place. The most important thing is that the viewer notices the hand and the pocket so the character cannot be performing any competing actions. Let's say that something is about to happen on the right.

A character may prepare for that action by pointing their eyes and head to look in that direction leading the viewers to also look there It's important to make it as easy as possible for the audience to understand what's going on without having to watch it twice. But this can also be used to trick the audience too. If you lead their eyes in One direction and then surprise them by having something happen on the other side of the screen.

Taking anticipation of step further you can actually have multiple levels of anticipation Let's go back to our punch animation where the character winds up before punching. This animation has one level of anticipation Now look at this one. The character is actually winding out for his wind-up by going forward then winding up and then before punching he throws his other arm back to further anticipate the punch.

This punch is very complex. It's actually similar to what a baseball pitcher does when he's getting ready to throw the ball. So the third principle of animation is called staging.

Staging is the presentation of any idea so that it is completely and unmistakably clear. This is a very broad principle because it covers so many areas of animation. It can apply to acting, timing, camera Angle and position and setting.

So when you're animating you want to be in full control of where the audience is looking. You're essentially saying look at this, now look at this and now look at this. This control is achieved through staging.

All of the elements of the scene work together to move the viewers eyes around the screen. Here's an example of bad staging. The characters are competing for stage presence, so the viewer doesn't know which one to look at.

The camera has a lot to do with this. It's important to know when to be closed up and went to be far away. Far away is good for big actions while close-up is good for expressions.

Don't have the main action be off to the side. It should be either in the center of the screen or in one of the thirds of the screen. If they're facing to the side there should be more empty space in the direction that they're facing Unless someone's sneaking it behind them in which case they would no longer be the main character of the shot.

The main action of the scene should be very clear and simple. It can't be upstaged by other things that are going on. This takes attention away from the main point.

It should also have proper timing. Let one action finish before the other person starts their action instead of overlapping them Sometimes you need to insert pauses if there's something on the screen that needs to be processed by the viewer before moving on. Sometimes if there's any text on the screen.

You should keep it on screen for as long as it takes to read it out loud three times. But it's not just about controlling the viewers eyes. It's also about conveying ideas.

If a character is sad for example. You want to make sure that the viewer knows that and feels that. If someone's house is supposed to be very poor and decrepit.

Go over the top to make sure that they get it and don't have any objects that detract from that purpose. Let's take this scene and give it the staging treatment. This fat guy is eating pizza the idea that we want to convey is that he is a severe over eater.

So let's set the stage more. Let's give them more pizza and put piles of pizza boxes behind him and stains on his shirt. Let's move the camera down below him to make him look bigger.

And let's change his acting so that his weight actually gets in the way of his eating. So he can't even reach for the soda without falling over. Now let's make sure to time it right.

So he notices the soda and then reaches for it. Now the idea is very clear. All right.

So the fourth animation principle is called straight ahead and pose to pose. This term describes two methods used to animate drawings. The first method straight ahead is where you draw the first drawing and then you draw the second drawing and then the third drawing and so on.

It's basically animating as you go. The second method post a pose is where you draw the beginning and end of each main pose and go back later to fill in the drawings in between So there are benefits to both methods. Pose to pose is generally better for most actions because it gives you the most control.

You have a good idea of what the action is going to look like very early in the process. So instead of worrying if the character is going to end up in the right place. You decide where they end up from the beginning and work backwards.

Also Using straight ahead animation can lead to the character changing size or being on a different level from beginning to end. Pose to pose can save you a lot of work. If you were to animate a whole sequence straight ahead and then realize that one pose is off.

You would have to change several drawings to fix that one pose. But with pose to pose you do the main poses to see if it feels right, and you can catch problems early on. Straight ahead animation on the other hand is good for animation that is unpredictable.

Some examples of this include fire, water particles, clouds of dust, explosions. The reason why straight ahead works well is because there are laws of physics that work at a constant rate. And it's hard to predict how it will work post a pose.

So when animating fire for example. You just go with the flow based on what you know about fire and let the fire kind of create itself. If we were to look at the beginning and end, we wouldn't even know how to in between it.

However, you can still use pose to pose to make the general shapes and fill it in between to make it smoother. Another example of unpredictable animation is overlapping action which will be covered in depth in the next video. Let's say that a character has floppy ears.

You could draw the figure with his ears for each pose and just draw the in-betweens accordingly. But another method is to animate the figure using post to pose without the ears and then going through and adding the years using straight ahead This is good because you can focus on the figures movements without the distraction of having to do his ears. And you can also focus on the physics of his ears without the distraction of his body's movement.

This also applies to hair, tails and other appendages. When you work pose to pose, there's some vocabulary that goes into it. There are main poses called keys.

Secondary poses called extremes. And further broken-down poses called breakdowns. Make the keys first.

Perfect them. Then decide the farthest the character will go in each direction using extremes. And then decide how you want the extremes to connect using breakdown poses.

At this point you can start in-betweening. Working with this sort of hierarchy will give you the most control as opposed to doing your post to pose, straight ahead, so to speak. This is like post to pose with in pose to pose because you are perfecting the poses at each level Before moving down to the next level.

Alright, so the next principle of animation is called follow through and overlapping action. This is a technique of having body parts and appendages dragged behind the rest of the body and continue to move when the body stops. Follow through and overlapping action are often associated with another technique called drag These names all describe the same thing but in different ways.

For example Follow through refers to the way parts of the body continue to move after the body is stopped. Overlapping action describes the offset between the timing of the main body and its other parts. Drg describes the technique of delaying the movement of body parts in relation to the main body.

All three of these are basically describing different aspects of the same thing. Follow through and overlapping action add a great deal of realism to a character. Here's a character with and without follow through and overlapping action.

Basically when the main body moves, the tip of the appendage should be the last to catch up. And when the body stops, the tip should follow through the farthest before settling back. This is true of not just appendages, but the whole body as well.

When coming to a stop often the body will follow through and then come back. Just as the character needs to anticipate his jump he also needs to follow through his land. Sometimes the extra skin on the character can be treated as a separate entity with Drg and follow through.

Similar to squash and stretch the amount of drag that you give something says something about its mass. The first one is like a TV antenna while the second one is like a feather. It's usually easier to add the appendages after the animation of the main body is finished when adding hair for example.

Use the previous frame as an indicator of where the hair should be stretched towards. Since it has drag it should be dragging from where wasn't the last frame. In addition, make sure to let the hair follow through when the body comes to a stop.

Arms are a good place to insert follow through and overlapping action have the elbows lead the arms actions, the elbow comes first followed by the forearm, and then the hand. This is true even when walking, the forearms drag slightly behind the elbows and the hands drag slightly behind the forearms Overlapping action helps break up an animation to make it more interesting. If we offset the movement of the arms and legs the animation appears more graceful.

If a character is standing up from the ground we could offset the top half from the bottom half to make it look less easy and more realistic . Alright. So the next principle is called slow in and slow out.

This principle refers to the way pretty much all movement starts slowly, build speed and finishes slowly. This is one of the most important principles to achieving lifelike motion without slow in and slow out, things feel mechanical. That's because robots are one of the only things that actually move their parts at a constant speed.

To use this principle in 2d animation, you take your extreme poses draw a single in-between and then draw in between those then only in between the drawings closest to the extremes until you're satisfied with the amount of slow in and slow out. With 3D animation and motion graphics adding slow in and slow out as a matter of changing the motion curves from linear to spline by adjusting the bezier handles. As time progresses the object starts slow, gets fast, and then slowly.

Use it wisely. For example you wouldn't add a slow out to a bouncing ball as it's colliding with the ground. But you would add it as it's bouncing back up.

You wouldn't add it to a bullet coming out of a gun. But you would add it as the gun comes up due to whiplash. Using this principle can allow you to only have to draw one in between if the motion is quick enough.

Drw one in between and then add another frame on either end with the drawing slightly skewed in the correct direction, and then it's done. Sometimes you don't even have to add the one in between. This kind of motion can be achieved in 3D with very extreme curves.

Many people starting out with animation get impatient and draw the next frame very far away from the beginning. It's very unrealistic for a character to go from completely still to super fast so adding a few drawings to ease into it will fix the problem. A good way to fix a choppy animation is to analyze the space between the drawings.

They should be evenly spaced with drawings closer together at the beginning of the action and at the end of the action and drawings farther apart in the middle. All right. The seventh principle of animation is called Arcs.

So very few organisms are capable of movements that have a mechanical in and out or up-and-down precision Most living creatures will move in a circular path, otherwise known as an Arc So let's say that we were given these key poses. And we're told to fill in the poses in between. Simply taking the midway point between the poses will not work.

Because this looks way too mechanical. The ball needs to follow an ARc. Of course we also need to consider the slow in and out caused by Gravity.

When doing this in 3D and motion graphics we can achieve this effect by keeping the movement in the x-Axis constant but giving the movement in the y-Axis a slow in and slow out This will give the ball its arc. Now let's look at this head turn. Right now it looks pretty dull and straight, but if we add an Arc to it, it gives it a little bit more character.

Forgetting about Arcs can lead to some obvious mistakes. For example we may in between this movement by calculating the midpoint like this and cause the shape of the object to shrink. If we were to draw a simple Arc as a reference, then this movement would be a lot easier and more realistic.

Arcs can be added to almost any figure movement. This guy is landing on the ground. Let's have his body settle in an Arc.

This guy is reacting with shock. Let's have his body and arms follow an Arc. This guy is taking a step.

Have his body moved down and up in an Arc before he even takes his next step This guy's kicking. Have his leg and body follow through in an ARc When movements are very fast you can add arcs in the form of a smear. Take the beginning and end pose and draw an aRc in between and fill it in the same color as the object maybe slightly transparent or fragmented towards the end of the action.

Ok. The next principle is called Secondary action. This principle is often associated with overlapping action.

Although according to Frank and Ollie it means something very different. Secondary action describes gestures that support the main action to add more dimension to the character animation. For example a character may be walking angrily.

The primary action is the legs and the secondary action is everything else: the arms swinging, the head bobbing and the facial movements. Let's say a character is about to knock on a door. The secondary action of the other hand will communicate what kind of door knocking this is.

If it's a fist, it makes him look angry. If it's dainty, it gives them a graceful, happy vibe. If it's tucked close while the head looks back and forth before knocking it communicates that he doesn't want to be discovered.

This guy's picking up a box. We can give him more personality by having him rub his hands together and twiddle them in the air while getting ready to pick it up. It's important not to let the andheri action dominate the primary action.

If a figure has a sad expression that should be seen. and we are adding a secondary action of wiping away the tear. The hand shouldn't cover the face.

On the other hand don't let it go unnoticed. People might not even notice that there's a tear there, unless you give it its own time. This is why the principle of staging is very important in Secondary action.

So let's take this simple bite animation and give it some secondary action. First, let's make him lick his lips to show that he's hungry. Next let's make him close his eyes and have his eyebrows go up showing that he likes it.

Last, let's make him shake his head because he cannot believe how good it tastes. The primary action is the bite. But all the secondary actions add more dimension to the bite.

So the next principle is called timing This principle states that the personality and nature of an animation is greatly affected by the number of frames inserted between each main action. Basically if you have many drawings that are very close together in between the two main poses, the action will be very slow. If you have very few drawings set far apart from each other, the action will be very fast.

Less drawings means fast, more drawings means slow. One simple action can have ten different meanings, depending on how many frames you give it. This man is leaning from one shoulder to the other.

With no in-betweens it looks like his head is being hit by a tremendous force nearly snapping off his neck. With one in-between his head has been hit by a rolling pin or some other object. With two in-betweens, he has a muscle twitch.

With three in-betweens, he's dodging the rolling pin or the other object. Before he's saying moving get out of here. With five, he's more friendly saying over here.

Come on. Hurry. With six, he sees a good-looking girl, or the sports car he always wanted.

With seven, he's trying to get a better look at something. With eight, he's searching for the peanut butter on the kitchen shelf. With nine, he is appraising something very thoughtfully.

And with ten in-betweens, he is stretching a sore muscle. The standard frame rate for movies is 24 frames per second. If one drawing is made for each frame 24 drawings per second, that is called drawing on once.

If one drawing is made for every two frames, that's called drawing on twos. And every three drawings is threes and so on. It's actually very common to draw on twos than once for a few reasons.

First it cuts the amount of work in half. Second it actually makes slow actions look smoother than if you were to draw every frame. Because the precision needed to draw in between two very close drawings can lead to the animation looking jittery.

Some would also say that drawing on twos is better for fast actions as well. Because it gives a sparkle and spirit to the animation that would otherwise be too evenly timed and less lively if it were drawn on once. But drawing on ones is necessary when there's a very fast action that needs to be read often to scramble or a flurry of activity.

And it's also everyone's choice how many drawings to put in between poses. Some people draw more or less streams depending on how much movement there is. This can give a very dynamic effect to the animation.

So the next principle is called exaggeration. Basically every action, pose and expression can be taken to the next level to increase the amount of impact on the viewer. So the early animators that Disney would get confused because Walt would tell them to add more realism, but then when they changed it he would criticize the result because it wasn't exaggerated enough.

In walt's mind, there was probably no difference making it more realistic didn't mean make the physics and proportions more consistent with reality. But rather make the idea or essence of the action more apparent and real. So if a character was sad, make him sadder.

Bright, make him brighter. Worried, make him more worried. Wild, make him wilder.

Exaggeration doesn't mean more distorted, but more convincing. It's amazing how you can always add exaggeration. This animation looks finished, right?

But let's give it some exaggeration. Now when we compare the two, the first one definitely looks less powerful even though earlier we thought it was finished. When motions are quick, the exaggeration needs to be bigger in order to be noticed.

This still frame looks way too extreme to be realistic. But when you play it in motion it looks less extreme. That's because a lot of the frames that your eye perceives in a short time are less extreme frames and only one of them is very extreme.

So in order to boost its presence you can either make it stay on the screen longer or make it more extreme. Since it's hard to tell how much room you have for exaggeration, a good rule to follow is to push the exaggeration level until it actually becomes too much. Then wind it back until you're satisfied with it.

This way you see the whole range beforehand instead of shooting in the dark. So the next principle is called solid drawing. This principle is about making sure that forms feel like they are in three-dimensional space with volume weight and balance.

One thing that makes animating a lot easier is being able to draw a figure from all angles. This requires knowledge of three-dimensional drawing. For example when drawing a line on a sphere it must follow the contour of the spheres surface.

A straight line instantly makes the circle look flat. When drawing cubes, avoid making parallel lines. Lines should be bent towards the vanishing point.

Otherwise, it will look like a flat symbol or a logo. When doing a rough pass of the character use basic solid shapes like spheres, cubes and cylinders to construct the character instead of circles squares and rectangles. This will help you be mindful of the space therein.

Another thing you can do is draw perspective lines on the ground to keep track of their distance from the camera so that you can know when to draw them bigger or smaller. When moving on to the clean line version of your character be very mindful of overlap and try to include it whenever possible. Without overlap everything appears to be on the same plane.

But just adding a single line here and there can define where surfaces come out and where they recede. Another thing to note when doing lines is to avoid symmetry. Symmetrical lines look flat.

Try to pair a straight line with a curved line or offset two curved lines. So it looks more natural and dynamic. The principle of solid drawing applies to 3D animation as well.

In regards to portraying weight and balance in the pose of a character. For example avoid what's called twinning which happens when the arms and legs and other paired features are doing the exact same thing. This is a known affliction that animators have to make a conscious effort to avoid instead lean it over to one side or put one hand on the hips or give it a slouch or do something to show that it has weight and has to keep its balance in a 3D environment.

Alright. The last principle of animation is called appeal. Basically characters that you animate should be somewhat pleasing to look at.

They should have some kind of charismatic aspect to like about them. This doesn't only apply to the hero of the story, but also the villain and every other character Appeal doesn't always mean good-looking. It can also mean interesting.

So the villain should be likable in the sense that they are interesting to look at. The tricky thing about this is that everyone has a different standard for what is appealing. However, just giving your character a dynamic design can greatly boost its appeal.

Here are three steps to doing that. First, use a variety of shapes instead of using the same shape for every character. Try out different shapes because there's no limit to the spectrum of crazy configurations that characters can have.

Every good character design starts with a clear shape. Second, play with proportions. Cartoonists often magnify the things we find interesting and shrink the things we might find ugly or boring.

For example they might enlarge the head and eyes shrink the body and make the hands larger. Finding the aspect of a character that defines his or her personality and blowing it up can often create a more appealing design. Third, keep it simple.

Too much information can over complicate the character and also make it harder and more restraining to animate. This is a difference between drawing for illustration and drawing for animation with animated characters you have to pick and choose what details to keep. Because you're going to be drawing those details hundreds of times.

So let's give some characters an appeal makeover. This king has a generic shape and not much personality. Let's make it more like an egg.

Now his appeal comes from looking proud, powerful and petite. This robot mercenary has too many details to see any personality. Let's pick a few details and emphasize them.

Remove the rest and change his shape. Now he has a mysterious appeal to him. This fisherman looks pretty average.

Let's adjust his proportions to emphasize his lankiness. and make that his point of appeal. So that's all I've got for appeal and that brings us to the end of our 12 part series.

So I thank you for watching it. I had a lot of fun making it and I actually learned a lot about animation, too. I do plan to continue making these videos and next I will be covering walk and run cycles.