Unveiling 12 PRINCIPLES of ANIMATION
VICTREE MEDIA 19
SUMMARY:
Frank Thomas and Ollie Johnston have identified 12 principles of animation for creating engaging animations. These principles include Squash & Stretch, Slow in & Slow out, Anticipation, Staging, and more. Squash & stretch provides flexibility, mass, momentum, speed, and weight to objects or characters, creating the illusion of life. Staging involves positioning, acting, timing, setting, camera angle, and position of characters and objects to direct the viewer's attention. Proper timing and timing can help convey ideas and emotions to the audience. Animation is a complex process that involves the use of motion graphics and tween-based animations to create realistic and organic motion. Timing and spacing are crucial in animation, determining the speed, distance covered, velocity, and mood of an action. Frames between poses and spacing create an illusion of weight and personality, grounding the animation in reality. Exaggeration pushes poses, facial expressions, and emotions beyond realism to create more entertainment value and contrast. Animators must be able to draw a character from all angles using basic 3D shapes like cubes, cuboids, cylinders, pyramids, and spheres. Appeal is achieved through attractive designs, unique shapes, and a balance between detail and simplicity. Charlie Chaplin, Mr. Bean, and other characters in animation use acting and pantomime to tell stories through body movement.
If you want to know in detail about 12 principles of animation and 8 more, read them down below:
Introduction:
Now that you know how to animate, you need to understand the principles of animation. This is to make your animation look more realistic. Lucky for us, two of the greatest animators: Frank Thomas and Ollie Johnston, have found and pointed out the 12 principles of animation. I have read books: the 'Illusion of Life' and the 'Animator's Survival kit' that is a complete Bible for all animators, so now I will share what I learnt from it and make it fun for you all to learn. Henceforth, in today's lesson, we're going to understand what is Squash & Stretch, Slow in & Slow out, Anticipation, Staging and more.
By understanding and applying these 12 principles of animation, animators can create engaging, believable, and appealing animations that captivate audiences and bring characters to life. These principles are the foundation of the art form and continue to be relevant in today's digital age.
Twelve Principles of Animation:
1) SQUASH & STRETCH
Keep in mind that overall volume of objects or characters should be the equal but only the shape should change. If the ball gets longer, then it should get narrower. When it gets flatter, then it also gets wider. This principle creates the illusion of life and adds appeal [One of the principles] to your animation.
2) ANTICIPATION
Anticipation prepares the audience for an action, just as people and animals do in real life. A footballer steadying themselves before taking a penalty or a golfer swinging their arms back before hitting the ball are examples of anticipation. Another example for this is that in most cartoons: like 'Looney Tunes' or 'Tom & Jerry', a character winds back before he/she takes off, and also when the character is about to punch, he/she reaches his/her arms back for communicating to the audience that he is about to punch and adding power. In contrast having no anticipation means a very weak punch, although it can be useful to show the power of a weak character. Similarly, when a character is jumping, He prepares by crouching down to build energy, before leaping into the air. It is like a spring that coils up before releasing. Jumping without any anticipation will look very unrealistic because the energy to jump comes out of no where. This principle helps create realistic and engaging animations.
3) STAGING
Staging is about presenting a clear idea or action to the audience. it involves positioning, acting, timing, setting, camera angle and position of characters and objects in a way that directs the viewer's attention to the most important elements. You need to be in full control of where audience should look, and this control is achieved.
If the characters are completing for stage presence, so the viewers will not know which one to look at. The camera has a lot to do with staging. It's important to know when to be close up and when to be far away. Far away is good for is for big action, while close up is good for expressions. Don't have the action be off to the side. It should be either in the center of the screen or on one of the thirds of the screen. If your character is facing to the side, there should be more empty space in the direction that they're facing, unless someone is sneaking up behind them, in which case they would no longer be the main character of the shot. The main action of the scene should be simple and super clear. It can't be upstaged by other things that are going on, as this takes the audience away from main point. It should also have proper timing. Let one action finish before the other person or object starts their action, instead of overlapping them. Sometimes, animators need to insert pauses if there's something on screen that needs to be processed by the viewer, before moving on. Sometimes, if there is any text on the screen, you should keep it on screen for a long as it takes to read it out loud 3 times.
It is not just about controlling the viewer's eyes, it is also about conveying ideas: for example if the character is sad, as an animator, you want to make sure that the viewer knows that and feels that sadness. Similarly, if someone's house is supposed to be very poor and broken down, go over the place to make sure they get that. Do not add any objects that distract from that purpose, and this is why Mr. Bean - The animated series staging is a bit confusing. When you want to convey an idea that your character is a severe over-eater, add more pizza and a pile of pizza boxes behind him/her, stains on his shirt, along with setting the camera angle to down view. We can also change his acting, so that his weight actually gets in the way of his eating so he cannot even reach for the cold drink without falling over, and now to time it correctly, so he notices the soda, and then, reaches for it: this will make the idea very clear.
This is a very broad principle because it covers many areas of animation: such as exaggeration [Which you are going to learn soon]. Effective staging can convey emotions, ideas, and story points without the need for dialogue.
4) STRAIGHT-AHEAD ACTION & POSE-TO-POSE
Straight-Ahead action and Pose-to-pose, unlike other 11 principles, is more based on methods rather than rules for bringing more realism. There are 2 approaches to animating a scene: Straight-Ahead and Pose-to-pose. Straight-ahead involves animating in a style what children call 'Frame-by-frame frame'. This is drawing or rigging each and every frame as we go along from start to finish. While, Pose-to-pose includes setting key poses and then, filling out in-betweens. Both methods have their advantages and are often used in combination to create dynamic and detailed animations. Like an animator drawing a first pose, then the second, then third and so forth.
Pose-to-pose is the method that is used the most by animators because it gives them most control, unless you are creating animations that is unpredictable: such as clouds of dust, explosions, fire, paint spills and water particles. The reason why straight-ahead works better is because there are laws of physics that work at a constant rate, and it's hard to predict how it will work pose-to-pose. Let's take fire for example, you just animate with the flow based on what you know about fire, and let the fire create itself. If we were to look at the beginning and end, we would not even know how to in-between it. Nevertheless, you can still use pose-to-pose to make the principal shapes and fill it in-between to make it smoother. Another example of unpredictable animation is Overlapping Action (We will cover this topic in depth in the upcoming principle). Let's say that you are animating Bugs Bunny, You can draw him with his ears for each pose and just draw the in-betweens accordingly. However, another method is to animate him using pose-to-pose without the ears, and then, going through and adding in the ears using straight-ahead. This is good because you can focus on the rabbit's movements without the distraction of having to do his ears, and you can also focus on the physics of his ear without the distraction of his body movement. This also applies to hair, tails, and other appendages.
With pose-to-pose, you have a good idea of what the action is going look like very early in the process. There are main poses called 'Keys', secondary poses called 'Extremes', further broken down poses called 'Breakdowns', and then you have filling up poses called 'In-betweens'. Make the keys first; perfect them, then decide the furthest your character will go in each direction using extremes, then decide how you want to connect them using breakdown poses, and in the end, add in-betweens on each of them to make it smoother. Working with this hierarchy, will give the most control, as opposed to doing straight-ahead. This is like pose-to-pose within pose-to-pose, because you're perfecting the poses at each level. 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 action, can lead to the character changing size, or being on a different level from beginning to end; it can save a lot of work. If you were to animate the entire sequence straight-ahead (Frame-by-frame), and then, realize that one pose is off, you will have to change several frames to fix that one pose. Though, with pose-to-pose, you do the main poses to see if it feels perfect, and you can catch errors beforehand. When you work pose-to-pose, there is some vocabulary that goes into it. After all that, the breakdowns loosen up the motion between them, and they create visual interest and vitality.
5) FOLLOW-THROUGH & OVERLAPPING ACTION
Follow-through and Overlapping Action deals with the way parts of a character or an object continue to move after the main action has stopped. For instance, a character's antenna, clothing, hair or tail may continue to move for a few frames after they stop sprinting. They are often another technique called 'Drag'. These name all describe the same thing, but in different ways.
Overlapping Action occurs when different parts of a character move at different rates, creating a more natural and organic look. It helps to break up an animation to make it even more interesting. Follow-through is when parts of the body continue to move after the body has stopped. Drag tells the technique of delaying the movement of body parts in relation to the main body. All 3 of these are basically different aspect of the same thing. Follow-through and overlapping action add a great deal of realism to a character.
Fundamentally, 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 full body as well. When coming to a stop, often the body will follow through, and come back.
Just as a character needs to anticipate (the second principle of animation) his jump, he also needs to follow through his land. Sometimes, the extra chubbiness, fat or skin on a character can be treated as a separate entity with drag and follow-through. Similar to Squash and Stretch (The first principle of animation), the amount of drag you give something or someone, says something about its mass. The simple line with more follow-through and Overlapping Action, looks like a tail; while the one with less, looks like a T.V antenna. It's usually easy to add the appendages after the animation of the main body is finished. If you have seen my portfolio, you will know that I made a 'Cat moving his tail' animation, even in that I first made the body pose and afterward, focused on facial expression and tail movement. Trust me, I finished the work my work in 3 days with this principle, which would have taken me a week otherwise. For example, when adding hair, make use of onion skinning as an indicator of where the hair should be stretched towards. For it has drag, it should be dragging from where it was in 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 follow by the forearm, and then, the hand. This is through even when walking. The forearms drag slightly behind the elbows, and the hands drag slightly behind the forearms. If you offset the movement of the arms and legs, the animation appears more graceful. If a character is standing up from the ground, you could offset the top-half from the bottom-half to make it look less effortless and more realistic.
6) SLOW IN & SLOW OUT (Ease In & Ease Out)
In real life, characters and objects do not start and stop instantaneously. There is a gradual acceleration and deceleration. Slow in and Slow out (Ease in and Ease out) copies this by having more frames near the beginning and end of an action, with fewer frames in the middle. This is one of the most important principles that create a smooth, life-like movement and emphasizes key poses. Without slow in and slow out, thing feel mechanical, for the reason is that robot are one of the only things that actually move their parts at a constant speed.
To utilize this principle in 2-D {Two Dimensional} animation, you take your extreme poses, draw a single in-between, and then, draw in-betweens those, then only in-between the drawings closest to the extremes, until you are satisfied with the amount of slow in and slow out. With tween-based, motion graphics and 3-D {Three Dimensional} animation, adding slow-in or slow-out is a matter of changing the motion curves from 'Linear (Which is a straight line)' to 'Spline (Which is an S shape curve)' and by adjusting the Bezier handles. As time progresses, the object or character starts slow, builds up speed and ends slowly.
You need to use it wisely: like you would not add a slow out/ease out (Starting up slowly) to a bouncing ball as it's colliding with the ground, but you would add it as its bouncing back up. You would not also add it to a bullet coming out of a pistol; however, you would add it as the gun comes up due to whiplash [The pressure of the gun, not the movie]. Using this principle can allow you to only have to draw one in-between if the motion is quick enough. Draw one in-between, and then add another frame in either end, with the drawing slightly stewed in the right corner, and then it's done. Sometimes, you are lucky and you do not even need to add the one in-between. This kind of motion can be achieved in 3-D, motion graphics and tween-based animations with very extreme curves. By the way, when I say tween-based animation, I am referring to any software: 2-D or 3-D in which you do not draw each frame but instead just draw the key poses and computer does the rest: such as After Effects.
Many people starting out with animation get impatient and draw the next frame very far away from the beginning: it is 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 drawing slower together at the starting of the action and at the end of the action, and drawings further apart in the middle.
7) ARCS
Arcs and curved paths are followed by most natural movement, rather than straight lines. Animating along arcs create a more organic and life-like look. They can be found in the movement of a pendulum, a character's head turn, or even a bouncing ball. Incorporating arcs into your animation adds realism and appeal (Another principle of animation).
So very few organisms are capable of movement that have a mechanical in-and-out or up-and-down precision. Most living creatures will move in a circular path, aka {Also known as} known as an Arc. Let us say that, you want to make key poses for the ball bouncing to one side to the other. You have added 3 extreme poses of the ball and you want to fill in the in-betweens. Simply taking the middle point the poses will not work since it looks way too mechanical; the ball needs to follow an Arc. Also remember to consider the Slow in and Slow out/ Ease in and Ease out caused by the Earth's gravitational pull [Gravity in short]. Doing this in motion graphics, tween-based or 3D, you can achieve this effect by keeping the movement in the X-Axis constant, while giving the movement in the Y-Axis a Slow in and Slow out/ Ease in and Ease out, and if you are aware the basics of Adobe After Effects, Autodesk Maya, Blender or Cinema 4D, so you can see an Arc created in the graph. Same as with the ball, the head turn, without an Arc, looks very straight and dull, but if you add an Arc to it, it provides a little bit more character.
You may be wondering why I am making so many obvious, foolish mistakes when you try to animate and the reason to that is you are forgetting about Arcs. For example, you may in-between the movement of a door opening and closing by calculating the center point, and you'll realize that you caused the door to shrink, but if we were to take an Arc as a reference and the door opening/closing will be a lot easier and more realistic. Arcs can be added to any character movement: Superman is landing on the ground, his body will settle in an Arc; Gohan (From Dragon Ball) is reacting with shock, let's have his body and arms follow an Arc; Luffy is taking a step, let's have his body move up and down in an Arc before he even takes his next step; and Sasuke is kicking, let's have his body and leg follow through in an Arc. When movements are very swift, you can add Arcs in a form of a smear. Just 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.
Arcs and curved paths are followed by most natural movement, rather than straight lines. Animating along arcs create a more organic and life-like look. They can be found in the movement of a pendulum, a character's head turn, or even a bouncing ball. Incorporating arcs into your animation adds realism and appeal (Another principle of animation).
So very few organisms are capable of movement that have a mechanical in-and-out or up-and-down precision. Most living creatures will move in a circular path, aka {Also known as} known as an Arc. Let us say that, you want to make key poses for the ball bouncing to one side to the other. You have added 3 extreme poses of the ball and you want to fill in the in-betweens. Simply taking the middle point the poses will not work since it looks way too mechanical; the ball needs to follow an Arc. Also remember to consider the Slow in and Slow out/ Ease in and Ease out caused by the Earth's gravitational pull [Gravity in short]. Doing this in motion graphics, tween-based or 3D, you can achieve this effect by keeping the movement in the X-Axis constant, while giving the movement in the Y-Axis a Slow in and Slow out/ Ease in and Ease out, and if you are aware the basics of Adobe After Effects, Autodesk Maya, Blender or Cinema 4D, so you can see an Arc created in the graph. Same as with the ball, the head turn, without an Arc, looks very straight and dull, but if you add an Arc to it, it provides a little bit more character.
You may be wondering why I am making so many obvious, foolish mistakes when you try to animate and the reason to that is you are forgetting about Arcs. For example, you may in-between the movement of a door opening and closing by calculating the center point, and you'll realize that you caused the door to shrink, but if we were to take an Arc as a reference and the door opening/closing will be a lot easier and more realistic. Arcs can be added to any character movement: Superman is landing on the ground, his body will settle in an Arc; Gohan (From Dragon Ball) is reacting with shock, let's have his body and arms follow an Arc; Luffy is taking a step, let's have his body move up and down in an Arc before he even takes his next step; and Sasuke is kicking, let's have his body and leg follow through in an Arc. When movements are very swift, you can add Arcs in a form of a smear. Just 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.
8) SECONDARY ACTION
Secondary Action refers to smaller movements or gestures that support the main action of a character. These actions enhance the idea of the primary action without distracting from it. This principle is often associated with follow through and overlapping action. Even though, according to Frank Thomas and Ollie Johnston, it means something very different. It is important to not let the secondary action direct primary action. If your character has a sad expression that should be seen and we are adding a secondary action of wiping away the tear, the hand, tissue or cloth should not cover the face. On the other hand, do not let it go unnoticed. Your viewers might not even notice that there's a tear, unless you give it some time. If you recall, I said the same thing in staging too, that give a pause for your audience to catch on what's happening. Let's make 'Wimpy eating a burger for the first time' animation and give it some secondary action, first let us make him lick his lips to show that he is hungry, next let's make him close his eyes and have his eyebrows go up that he likes it, and lastly, let's make him shake his head because it is very delicious. The primary action is the bite, but all the secondary actions add more dimension to the bite.
For instance, a character jogging could have panting and a brow wipe as secondary actions that emphasize their tiredness. If Hulk is walking very angrily, the primary action will be the legs, and the secondary action are considered everything else: the arm swinging, the head bobbing and the mouth movements. Let's say Popeye is knocking at the door, the secondary action of the other hand will communicate what type of door knocking it is: if it is a fist, it will make Popeye look mad; if it's dainty, it gives him a graceful happy vibes; and if it is tucked close while the head looks back and forth before knocking, it tells that he does not want to be discovered. A limper picking up a tiny crate, you can give him more personality by having him rub his hands together and twiddle them in the air, while getting ready to pick them up.
Secondary Action refers to smaller movements or gestures that support the main action of a character. These actions enhance the idea of the primary action without distracting from it. This principle is often associated with follow through and overlapping action. Even though, according to Frank Thomas and Ollie Johnston, it means something very different. It is important to not let the secondary action direct primary action. If your character has a sad expression that should be seen and we are adding a secondary action of wiping away the tear, the hand, tissue or cloth should not cover the face. On the other hand, do not let it go unnoticed. Your viewers might not even notice that there's a tear, unless you give it some time. If you recall, I said the same thing in staging too, that give a pause for your audience to catch on what's happening. Let's make 'Wimpy eating a burger for the first time' animation and give it some secondary action, first let us make him lick his lips to show that he is hungry, next let's make him close his eyes and have his eyebrows go up that he likes it, and lastly, let's make him shake his head because it is very delicious. The primary action is the bite, but all the secondary actions add more dimension to the bite.
For instance, a character jogging could have panting and a brow wipe as secondary actions that emphasize their tiredness. If Hulk is walking very angrily, the primary action will be the legs, and the secondary action are considered everything else: the arm swinging, the head bobbing and the mouth movements. Let's say Popeye is knocking at the door, the secondary action of the other hand will communicate what type of door knocking it is: if it is a fist, it will make Popeye look mad; if it's dainty, it gives him a graceful happy vibes; and if it is tucked close while the head looks back and forth before knocking, it tells that he does not want to be discovered. A limper picking up a tiny crate, you can give him more personality by having him rub his hands together and twiddle them in the air, while getting ready to pick them up.
9) TIMING & SPACING
Timing and spacing is crucial in animation. Take it like this, an adult walks to the other side of the studio in just 4 seconds, and if he walks again but with smaller steps, he will be covering the same distance but will take 9 seconds. Similarly, if I take the same steps, slowly or quickly then I will need more/less time cover the distance depending on the velocity. This determines the speed, distance covered, velocity and mood of an action. The number of frames between poses and the spacing of those frames create the illusion of weight and personality. Proper timing grounds the animation in reality and helps establish the character's mood and personality. Basically if you have many drawings that are close together in between the 2 main poses the action will be very slow. If you have fewer drawings that are set afar from one another, the action will be very fast. The reason is that imagine, you are animating in 12 fps {Frames per second} and if you have drawn 30 pictures to move will now almost take 3 seconds. On top of that, animation works more on frames rather than seconds and what I mean by that is when you record a reference of walking 4 steps ahead, it will take you approximately 3-4 seconds: but in animation (24 Fps), you will be done within 2 seconds. So, less images mean fast, and more images mean slow.
One simple action can have 12 different meanings, depending on how many frames you give it. If you animate a man leaning from one shoulder to another, with no in-betweens, it looks like his head is being hit by a tremendous force nearly snapping of his neck. With a single in-between, his head has been hit by a rolling pin or some other object; with 2 in-betweens, he has a muscle twitch; with 3 in-betweens, he is dodging a hummer or the other object; with 4 in-betweens, he is saying "Move it/ Get out of here;" with 5 in-betweens, he's more friendly saying "Hey, guys! Over here. Come on, hurry;" with 6 in-betweens, he sees a good-looking girl, or a sports car that he always wanted; with 7 in-betweens, he is trying to get a better look at something strange; with 8 in-betweens, he's searching for a tomato ketchup on the kitchen shelf; with 9 in-betweens, he is judging someone or something very thoughtfully; and with 10 in-betweens, he is stretching a sore muscle.
The standard frame rate for animation/movie is 24 Fps {Frames per second}: if one drawing is made for each frames 24 times, this is called drawing on ones; if one drawing is made for every 2 frames, this is called drawing on twos; if one drawing is made for every 3 frames, this is called drawing on threes, and so on. It's actually very common to draw on 2s than 1s for a few reasons: first, it cuts the amount of work in half, second it actually makes slow action look smoother than if you were to draw every frame because the precision needed to draw in-between very close drawings can lead to the animation looking jittery, and some would also say that drawing on 2s is better for fast action as well, because it gives a sparkle and spirit to the animation [Too smooth & more lively] that would otherwise be too evenly timed and less lively if it were drawn on ones [I think, this is based on personal experience]. However, drawing in 1s is necessary when there's a very fast action that needs to be read, often to scramble, to battle, or a flurry of activity, and it is also everyone's choice how many drawings to put in-between poses. Some people draw more/less frames depending on how much movement there is, and this can give a very dynamic effect to the animation.
Timing and spacing is crucial in animation. Take it like this, an adult walks to the other side of the studio in just 4 seconds, and if he walks again but with smaller steps, he will be covering the same distance but will take 9 seconds. Similarly, if I take the same steps, slowly or quickly then I will need more/less time cover the distance depending on the velocity. This determines the speed, distance covered, velocity and mood of an action. The number of frames between poses and the spacing of those frames create the illusion of weight and personality. Proper timing grounds the animation in reality and helps establish the character's mood and personality. Basically if you have many drawings that are close together in between the 2 main poses the action will be very slow. If you have fewer drawings that are set afar from one another, the action will be very fast. The reason is that imagine, you are animating in 12 fps {Frames per second} and if you have drawn 30 pictures to move will now almost take 3 seconds. On top of that, animation works more on frames rather than seconds and what I mean by that is when you record a reference of walking 4 steps ahead, it will take you approximately 3-4 seconds: but in animation (24 Fps), you will be done within 2 seconds. So, less images mean fast, and more images mean slow.
One simple action can have 12 different meanings, depending on how many frames you give it. If you animate a man leaning from one shoulder to another, with no in-betweens, it looks like his head is being hit by a tremendous force nearly snapping of his neck. With a single in-between, his head has been hit by a rolling pin or some other object; with 2 in-betweens, he has a muscle twitch; with 3 in-betweens, he is dodging a hummer or the other object; with 4 in-betweens, he is saying "Move it/ Get out of here;" with 5 in-betweens, he's more friendly saying "Hey, guys! Over here. Come on, hurry;" with 6 in-betweens, he sees a good-looking girl, or a sports car that he always wanted; with 7 in-betweens, he is trying to get a better look at something strange; with 8 in-betweens, he's searching for a tomato ketchup on the kitchen shelf; with 9 in-betweens, he is judging someone or something very thoughtfully; and with 10 in-betweens, he is stretching a sore muscle.
The standard frame rate for animation/movie is 24 Fps {Frames per second}: if one drawing is made for each frames 24 times, this is called drawing on ones; if one drawing is made for every 2 frames, this is called drawing on twos; if one drawing is made for every 3 frames, this is called drawing on threes, and so on. It's actually very common to draw on 2s than 1s for a few reasons: first, it cuts the amount of work in half, second it actually makes slow action look smoother than if you were to draw every frame because the precision needed to draw in-between very close drawings can lead to the animation looking jittery, and some would also say that drawing on 2s is better for fast action as well, because it gives a sparkle and spirit to the animation [Too smooth & more lively] that would otherwise be too evenly timed and less lively if it were drawn on ones [I think, this is based on personal experience]. However, drawing in 1s is necessary when there's a very fast action that needs to be read, often to scramble, to battle, or a flurry of activity, and it is also everyone's choice how many drawings to put in-between poses. Some people draw more/less frames depending on how much movement there is, and this can give a very dynamic effect to the animation.
10) EXAGGERATION
Exaggeration is pushing poses, facial expression and emotions way past realism to create more entertainment value, visual appeal, and contrast [Trying to escape that dreaded uncanny valley]. This is used to push movements further, adding more appeal and readability to an action. It can be used to create extremely cartoony movements or to enhance more realistic actions. It helps make the animation more exciting, fun, engaging, and expressive. Basically every action, pose and expression can be taken to the next level to increase the increase the amount of impact on a viewer.
So the early animators (The animation legends) at 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 brain, 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. This means if the character was sad, make him/her even sadder; if the character was bright, make him/her even brighter; if the character was worried, make him/her even more worried; and if the character was wild, make him/her even wilder. It doesn't mean more distorted, more convincing.
It is amazing how you can always add exaggeration. The non-exaggerated action looks less powerful, while the exaggerated action looks more powerful. When motions are rapid, the exaggeration needs to be bigger in order to be noticed. Even the motion looking way too extreme to be realistic will look less extreme, when you play it in motion. The reason for this is that a lot of the frames that your eyes perceive in a short time are less extreme 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 is 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. After that, wind it back until you are satisfied with it. This way you see the whole range beforehand instead of shooting in the dark.
Exaggeration is pushing poses, facial expression and emotions way past realism to create more entertainment value, visual appeal, and contrast [Trying to escape that dreaded uncanny valley]. This is used to push movements further, adding more appeal and readability to an action. It can be used to create extremely cartoony movements or to enhance more realistic actions. It helps make the animation more exciting, fun, engaging, and expressive. Basically every action, pose and expression can be taken to the next level to increase the increase the amount of impact on a viewer.
So the early animators (The animation legends) at 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 brain, 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. This means if the character was sad, make him/her even sadder; if the character was bright, make him/her even brighter; if the character was worried, make him/her even more worried; and if the character was wild, make him/her even wilder. It doesn't mean more distorted, more convincing.
It is amazing how you can always add exaggeration. The non-exaggerated action looks less powerful, while the exaggerated action looks more powerful. When motions are rapid, the exaggeration needs to be bigger in order to be noticed. Even the motion looking way too extreme to be realistic will look less extreme, when you play it in motion. The reason for this is that a lot of the frames that your eyes perceive in a short time are less extreme 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 is 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. After that, wind it back until you are satisfied with it. This way you see the whole range beforehand instead of shooting in the dark.
11) SOLID DRAWING
Solid Drawing is about creating accurate, 3D drawings with a clear sense of anatomy, balance, volume, and weight. In 2D animation, this principle ensures that the drawings have a solid form, while in 3D animation, it involves posing the character rig to achieve the same effect, in regards to portraying anatomy, balance, volume, and weight in the pose of a character. For example, avoid doing what is called 'Twinning', which happens when the legs, arms and other paired features are doing the same exact thing. This is a known affliction that animators have to make a conscious effort to avoid, instead lean it over to one side, put one hand on the hips, give it a slouch, or do something to show that it has weight and has to keep its balance in a 3D environment. This creates a clear silhouette and avoids boring, mirrored poses. One thing that makes animating a lot easier is being able to draw a character from all angles. This requires knowledge of 3D drawings. For example, when drawing a line on a sphere, it must follow the contour (Outline) of the sphere's surface. A straight-line instantly makes the circle look flat. When drawing cubes, avoid making parallel lines; instead they should be bend towards the vanishing point. Otherwise they will look like a flat symbol or a logo.
When doing a rough sketch of the character, use basic 3D shapes like cubes, cuboids, cylinder, pyramids and spheres to construct the character instead of basic 2D shapes like circle, rectangle, square, and triangle. This will help you be mindful of the space they are in. Another thing you can do is draw perspective grid 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 by just adding a single or double 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 2 curved lines, so it looks more natural and dynamic.
Solid Drawing is about creating accurate, 3D drawings with a clear sense of anatomy, balance, volume, and weight. In 2D animation, this principle ensures that the drawings have a solid form, while in 3D animation, it involves posing the character rig to achieve the same effect, in regards to portraying anatomy, balance, volume, and weight in the pose of a character. For example, avoid doing what is called 'Twinning', which happens when the legs, arms and other paired features are doing the same exact thing. This is a known affliction that animators have to make a conscious effort to avoid, instead lean it over to one side, put one hand on the hips, give it a slouch, or do something to show that it has weight and has to keep its balance in a 3D environment. This creates a clear silhouette and avoids boring, mirrored poses. One thing that makes animating a lot easier is being able to draw a character from all angles. This requires knowledge of 3D drawings. For example, when drawing a line on a sphere, it must follow the contour (Outline) of the sphere's surface. A straight-line instantly makes the circle look flat. When drawing cubes, avoid making parallel lines; instead they should be bend towards the vanishing point. Otherwise they will look like a flat symbol or a logo.
When doing a rough sketch of the character, use basic 3D shapes like cubes, cuboids, cylinder, pyramids and spheres to construct the character instead of basic 2D shapes like circle, rectangle, square, and triangle. This will help you be mindful of the space they are in. Another thing you can do is draw perspective grid 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 by just adding a single or double 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 2 curved lines, so it looks more natural and dynamic.
12) APPEAL
Appeal is the quality that makes a character that you animate interesting and, as the name suggest, appealing to the audience. A character with appeal is pleasing to look at and has a charismatic aspect to them, even when they are the main villains of the story, so it does not only apply to the heroes. It can be achieved through attractive designs, unique shapes, and a balance between detail and simplicity.
Appeal does not always means good-looking, it can also mean interesting. So the enemy should be likeable in a sense that they are interesting to look at. The tricky thing about this is that everyone has a different standard for what is appealing. Nevertheless, just giving your character a dynamic design can greatly boost its appeal.
Here are the 3 steps to do that: first, utilize a variety of shapes. Instead of using the same shape for every character, try out different shapes because there is no limit to the spectrum of crazy configuration that characters can have. Every good character design starts with a clear shape in mind. Second, play with proportions. Cartoonist often magnify the things we find interesting and shrink the things we might find ugly or boring. For instance, they might enlarge the head and eyes, shrink the body, and make the hands larger. Finding the aspect of a character that defines his/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 the difference between drawing for animation and drawing for illustration. With animated characters, you have to pick and select what details to keep because you are going to be drawing those details hundreds of thousands of times.
Additional Principles of Animation:
You might be thinking now: "But Takzi, this is a 90 rule and there must be more rules found now." To that I would say, "Yes, you're right about that. despite established in 1980, it still is applied to this day and animators are still trying to perfect it." In the process of learning how to animate, you will find that many principles fall outside of these 12 categories. But yes, there are 8 new additional rules, which is also now found, and I will credit 'Angry Animator' to point them out for us. Please watch his video also and do support him. While you are at, watch Alan Becker's video on '12 principles of animation' too, and you are in luck because I am going to share more principles with you here.
13) ACTING & PANTOMIME
Acting and Pantomime are the art of taking on board the personality and character traits, and also telling a story solely through body movement. The body language must be clear, and expressions should not be needed in order to understand a character's emotion. A classic acting and pantomime test is to draw a sack of flour in various emotions and actions. It should be possible to read the pose without seeing a face or body parts: like arms or legs.
Acting for animated films or animation is more in common with the physical comedy of the silent era: Buster Keaton, Harold Lloyd, Mr. Bean and Charlie Chaplin would be good examples.
Appeal is the quality that makes a character that you animate interesting and, as the name suggest, appealing to the audience. A character with appeal is pleasing to look at and has a charismatic aspect to them, even when they are the main villains of the story, so it does not only apply to the heroes. It can be achieved through attractive designs, unique shapes, and a balance between detail and simplicity.
Appeal does not always means good-looking, it can also mean interesting. So the enemy should be likeable in a sense that they are interesting to look at. The tricky thing about this is that everyone has a different standard for what is appealing. Nevertheless, just giving your character a dynamic design can greatly boost its appeal.
Here are the 3 steps to do that: first, utilize a variety of shapes. Instead of using the same shape for every character, try out different shapes because there is no limit to the spectrum of crazy configuration that characters can have. Every good character design starts with a clear shape in mind. Second, play with proportions. Cartoonist often magnify the things we find interesting and shrink the things we might find ugly or boring. For instance, they might enlarge the head and eyes, shrink the body, and make the hands larger. Finding the aspect of a character that defines his/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 the difference between drawing for animation and drawing for illustration. With animated characters, you have to pick and select what details to keep because you are going to be drawing those details hundreds of thousands of times.
Additional Principles of Animation:
You might be thinking now: "But Takzi, this is a 90 rule and there must be more rules found now." To that I would say, "Yes, you're right about that. despite established in 1980, it still is applied to this day and animators are still trying to perfect it." In the process of learning how to animate, you will find that many principles fall outside of these 12 categories. But yes, there are 8 new additional rules, which is also now found, and I will credit 'Angry Animator' to point them out for us. Please watch his video also and do support him. While you are at, watch Alan Becker's video on '12 principles of animation' too, and you are in luck because I am going to share more principles with you here.
13) ACTING & PANTOMIME
Acting and Pantomime are the art of taking on board the personality and character traits, and also telling a story solely through body movement. The body language must be clear, and expressions should not be needed in order to understand a character's emotion. A classic acting and pantomime test is to draw a sack of flour in various emotions and actions. It should be possible to read the pose without seeing a face or body parts: like arms or legs. Acting for animated films or animation is more in common with the physical comedy of the silent era: Buster Keaton, Harold Lloyd, Mr. Bean and Charlie Chaplin would be good examples.
14) THUMBNAILS
Thumbnails are those scenes, which are planned with sketches that show the main actions, arcs and timings. They can be stick figures or polished drawings as you need. Even complex actions can be planned as thumbnails and this will allow you to see the entire action in your scene in a single image.
Thumbnails are those scenes, which are planned with sketches that show the main actions, arcs and timings. They can be stick figures or polished drawings as you need. Even complex actions can be planned as thumbnails and this will allow you to see the entire action in your scene in a single image.
15) SILHOUETTE
Silhouette by itself should be able to interpret the character's actions and emotions. We shouldn't need to see any interior details: such as the face [That's the ideal]. This requires the use of strong positive and negative shapes.
Silhouette by itself should be able to interpret the character's actions and emotions. We shouldn't need to see any interior details: such as the face [That's the ideal]. This requires the use of strong positive and negative shapes.
16) LINE OF ACTION & REVERSALS
Line of action is an imaginary line that runs from the base of the character to the head or along the strongest direction of physical action. You should design strong poses around a simple of action; usually it's a C curve or an S curve. If a pose is built upon this basic form, it is much easier to design a stronger silhouette. When you apply this principle to your animation, you'll find the power of reversals. When you transition from one line of action to another, flexibility is created by the reversal.
Line of action is an imaginary line that runs from the base of the character to the head or along the strongest direction of physical action. You should design strong poses around a simple of action; usually it's a C curve or an S curve. If a pose is built upon this basic form, it is much easier to design a stronger silhouette. When you apply this principle to your animation, you'll find the power of reversals. When you transition from one line of action to another, flexibility is created by the reversal.
17) OPPOSING ACTION
Opposing Action is when a body part moves in one direction, there is often the body part that moves in the opposite direction. This is an instinctive way for the body to remain in balance.
Opposing Action is when a body part moves in one direction, there is often the body part that moves in the opposite direction. This is an instinctive way for the body to remain in balance.
18) COUNTER POSE/TORQUE
Counter Pose or torque is the rotation of hips and shoulders relative to one another and this technique was used by The Renaissance artists like Michelangelo, to create life-like dynamic poses. This is essential in animating physical actions like walks, runs or jumps because the body naturally counter pose as we move to stay balanced and you can also use it to create naturalistic standing positions.
Counter Pose or torque is the rotation of hips and shoulders relative to one another and this technique was used by The Renaissance artists like Michelangelo, to create life-like dynamic poses. This is essential in animating physical actions like walks, runs or jumps because the body naturally counter pose as we move to stay balanced and you can also use it to create naturalistic standing positions.
19) LEADING ACTION
Leading Action is an action that can be led by a particular body part, so you can lead by the shoulder, the elbow or the wrist: any part of the body can lead an action. Walks, runs and jumps can be radically changed by leading with different body parts: chest, chin or hips.
Leading Action is an action that can be led by a particular body part, so you can lead by the shoulder, the elbow or the wrist: any part of the body can lead an action. Walks, runs and jumps can be radically changed by leading with different body parts: chest, chin or hips.
20) BREAKING JOINTS
Breaking Joints is a great technique loosening an action and giving it flexibility. Like for a zombie animation, joints can be broken in ways that are impossible anatomically but does look very great in animation.
Breaking Joints is a great technique loosening an action and giving it flexibility. Like for a zombie animation, joints can be broken in ways that are impossible anatomically but does look very great in animation.
21) ACCENTS
Accents are the strongest beats or actions in a scene. When you animate a dialogue scene, you have to graph the accents. Find out where the big accents are and align the action accordingly.
Accents are the strongest beats or actions in a scene. When you animate a dialogue scene, you have to graph the accents. Find out where the big accents are and align the action accordingly.
ACTIVITY 3:
The activity of yours is fun and very simple. Watch any 3 of your favourite old Disney animated movie and write down how many principles you could find in them. If you are not into Disney movies, you can always go for any other animated movie or cartoon of that time, but make sure it is 2D and is done traditionally.
Please kindly like and comment below
if you like that and for more blogs like this
© Copyright 2022 Takzicution™. All rights reserved.
The activity of yours is fun and very simple. Watch any 3 of your favourite old Disney animated movie and write down how many principles you could find in them. If you are not into Disney movies, you can always go for any other animated movie or cartoon of that time, but make sure it is 2D and is done traditionally.
Please kindly like and comment below
if you like that and for more blogs like this
© Copyright 2022 Takzicution™. All rights reserved.
Hey! I just finished reading your piece on the "12 Principles of Animation" and I’ve gotta say, it’s really impressive. You’ve done a great job explaining some pretty complex stuff in a way that feels approachable. I loved the mix of classic examples like Looney Tunes and Tom & Jerry — they really help make the concepts come to life!
ReplyDeleteThat said, I do have a few suggestions that might make it even better:
Tone & Readability: I love the conversational tone, but some of the paragraphs feel a little dense. Maybe breaking them up into shorter sections or using bullet points for the more technical bits could make it easier for people to follow along without feeling overwhelmed.
Consistent Examples: You’ve nailed it with the examples, but sometimes there’s a bit of a jump between different types of media (like 2D, 3D, and motion graphics). It might be a good idea to stick with one set of characters or examples for each principle to keep things consistent and easier to follow.
Balance: Some of the sections (like Squash & Stretch and Staging) go into a lot of detail, while others are a bit shorter. You might want to balance out the explanations a bit so each principle gets equal attention, that way nothing feels rushed or overly detailed.
Visuals: Adding some images or diagrams could really level up the whole piece. Since animation is such a visual topic, it might help readers better understand concepts like arcs or follow-through if they had something to look at.
Jargon: There are a few spots where technical terms like “tween-based animation” or “onion skinning” pop up without much explanation. If you’re writing for readers who might not be familiar with those terms, maybe add a quick definition or a little glossary at the end.
Overall, this is a really solid piece. With a few tweaks and maybe some visuals, I think it could go from great to amazing! Awesome work!
Hey! Thanks so much for the thoughtful feedback. I’m really glad you enjoyed the piece and found the examples helpful. I appreciate your suggestions and will definitely considering Breaking up dense paragraphs and using bullet points for technical details, sticking with consistent examples to keep things clear, balancing the detail across all the principles, and adding visuals to illustrate key concepts: including explanations for any technical terms.
Delete