Transcript for:
12 Principles of Animation

the 12 principles define how to make realistic and believable animation regardless of medium in this series we'll take you through all 12 principles one by one [Music] tip first up is squash and stretch so let's talk about squash and stretch all objects in the real world come under forces like gravity or impact and have characteristics like rigidity or flexibility literally squashing and stretching your subjects helps to illustrate how they are under the influence of their speed momentum weight or mass here's a basic example without squash and stretch and now with squash stretch applied see how the second example just feels more real if our subject is moving very quickly then their form should stretch to imply that speed when they come to a stop and lose all their momentum their form should squash as the perceived energy builds up as your subject loses momentum and expels the energy the amount of squash and stretch should decrease accordingly in this bouncing example the energy is being expelled into the ground with each bounce so each time the subject hits the floor the amount of squash and corresponding stretch reduces squash stretch isn't just for subjects that impact something or move quickly an entire subject's form might squash in anticipation for an action and then stretch when a movement to help sell the motion to the audience through contrast this is true whether for a subject's entire form or for something more nuanced like a character's face the most important rule to remember when squashing and stretching your subject is that their volume doesn't change if a subject is stretching taller it should compensate by becoming narrower if the subject is squashing to become shorter it should compensate by becoming wider that's it for squash stretch next up is anticipation so let's talk about anticipation anticipation in animation is essentially all about preparation ensuring both the subject and the audience is prepared for whatever action is about to take place let's take a jumping animation for example if our subject suddenly launches into the air it doesn't look terribly realistic the subject hasn't stored any energy in order to move suddenly upwards if your subject anticipates the jump by squashing downwards first then launching into the air it looks much more realistic here's an example with no anticipation and the same example with anticipation applied do you see how the anticipated jump looks much more believable often the direction of anticipation is directly opposite the direction of movement like in the case with this jump anticipate downwards move upwards we actually saw this in a lot of our examples in the previous squash and stretch episode two like in this simple example where the ball anticipates its fast movement forward and that's an important factor these 12 principles do not exist in a vacuum to better get your audience to empathize with the on-screen action they all interact with and rely on each other anticipation isn't just about believability it also adds flavor and polish to an otherwise simple animation like picking up an object for example not using anticipation makes for quite a linear and boring animation and crucially it doesn't lead the audience through the action they might miss what's happening because they aren't prepared to see it anticipation here does three things it directs the audience where to look it prepares them for the motion then finally leads them through it leaving no chance for misinterpretation if you put them next to each other there's no doubt which is the more engaging animation the amount of anticipation will affect your scene too if a subject tries to push something heavy there might be more than one level of anticipation they'll need to wind up first moving backwards preparing for the push and leading the audience's eye then with the second level anticipation bunch up against the object before moving it anticipating the motion and selling the weight of the object then finally they'll begin to push it moving something lighter requires much less anticipation essentially it all boils down to this anticipation proceeds and reinforces action so that's it for anticipation next up is staging so let's talk about staging which is really difficult because staging isn't just one thing it's the combination of different factors like composition action and timing exaggeration and characterization they come together in order to improve one thing clarity good staging increases clarity so let's go through some basic examples but please note this is not an exhaustive list but rather just a jumping off point for your ideas composition first then ensure your subjects are well framed don't have them off to the side or too small or too large to ensure your audience can follow the action consider placing them in center frame or follow compositional rules like the rule of thirds wider shots are better for bigger actions like running or jumping whereas close-up shots are better for conveying emotion or dialogue make sure you know which is the main subject of your scene giving your audience too much to look at once can cause confusion your environment and camera movement can help to direct the viewer's eye as well either towards or away from the subject when it comes to action and timing the two are codependent make sure to give your actions time to breathe if everything happens at once it's too confusing and reduces clarity let's say our subject trips over a rock and the other subject laughs at him showing this too close together makes it difficult for the viewer's eye to follow the action darting back and forth across the screen between subjects instead make the animation reactive our subject trips the other character notices then reacts then the subject reacts to the reaction much clearer exaggeration and characterization are so important for example i could show you our subject stubbing his toe this is a perfectly serviceable and realistic animation but not particularly engaging let's push this a step further by exaggerating the animation's character action and timing let's start by turning the normal walk into a walk of pure joy when the subject stubs his toe let's have him bunch up into the pain then he releases the pain launching into the air and finally begins literally fuming with anger this tells us so much more about the subject's character by exaggerating the action and timing to convey what's happening on the stage with increased clarity now let's polish this off by using the camera to aid in telling the story so once again staging is the combination of many different factors that all come together to improve one thing clarity that's it for staging next up is straight ahead and post oppose so let's talk about straight ahead and post a pose the two terms describe two different methods of animation straight ahead animation involves drawing all of your frames in order you start with frame one then frame two frame three and on and on until you complete your shot a bit like you did in the corner of your notebook during school when you should have been studying with pose to pose you plan out your animation by drawing the important frames first then going back and filling in the gaps this is great for most actions that are predictable and can benefit from planning out your actions each method has its own strengths and weaknesses and is suitable for different types of content straight ahead animation is best for animating natural or free-flowing animations like water splashing fire burning or clothes flapping these types of animations will be difficult to plan pose to pose because they have their own autonomy and can act unpredictably based on external influence while straight ahead animation is great for these types of motion does have some drawbacks for example if i animated a complicated longer animation straight ahead there's a strong possibility my character would shrink or grow accidentally as i'd only be referencing the few frames that come before it meaning mistakes and small differences become amplified over time with poster pose you plan out and draw your frames in order of their importance starting with the vital frames then going back and adding in the rest this stops accidental growth shrinking or warping of features because they're planned out the downside is movements can look less natural and stiff if you're not careful with poster pose you should plan your shot in four stages number one your keys or keyframes that tell the story of your animation number two extremes which exist at the furthest point of movement in any direction number three your breakdowns which describe the movement between extremes and number four your tweens which go in between all the other frames to give the shot the correct timing the first frames you draw are your keys or key frames these are the frames that tell the story of the shot let's say our subject is carrying a lit torch in a cave a bat swoops down and scares him he drops the torch and it fizzles out in a puddle the frames that tell the story would be our subject standing with a lit torch in a cave the bat swoops down our subject gets scared he leaps in the air dropping the torch the torch hits the water getting snuffed out plunging him into darkness these six frames are the keys and the bare minimum needed to tell the story the next frames to draw would be the extremes at the far end of any movement it's important to note that each subject in the scene will have its own extremes based on its movement so whilst the character is the focus here the torch and bats have their own extremes too for example our extremes for the character could be the character standing the character at the bottom of the crouch then at the top of his leap then at the bottom of his cowering and the resting position of his cowering too for the torch it would be the torch in its original position at the bottom of the character's crouch at the peak of its arc through the air at the first frame it touches the puddle the peak of its smaller bounce then as it touches the puddle again and is snuffed out for the bat it would be when the bat appears at the base of its first bounce the peaks and base of each remaining bounce at this point you should have a fairly good idea of what your animation will look like and how long it will take but we need to get from one extreme to the next and to do this we use breakdowns breakdowns describe the movement between extremes and they're very important let's take a look at a simple example first then return to our scene these two extremes show our character turning their head let's put a basic breakdown between them that's simple enough now let's replace this one breakdown frame with something completely different can you see how that completely changes what the animation will turn out to be what if i change it again let's go back to our scene like with the extremes each subject has its own breakdowns too our characters breakdown should be wild and expressive to exaggerate his fear let's put them in first the torches breakdowns should follow the arcs of motion which ps is another principle we'll be discussing later the bat's breakdown should highlight the comedy by tilting and rocking between the extremes finally the in-betweens this is probably the most boring bit of animating all the fun figuring out is done and you should just add enough frames in between your other frames to make the timing of the animation correct now that's a well planned and executed scene but wait there's something missing as i'm sure you've noticed the character's torch isn't lit there's no splash on the puddle when the torch hits it or smoke when the torch is snuffed finally the string holding up the bat is also missing all these elements react to the movement of the other objects in the scene which we've now planned out so perfectly and because of that animating these straight ahead is both simple and effective now let's make a real power move by combining pose to pose and straight ahead animation the flames of the torch should trail behind the torch's movements easy now that we've planned that out the string on the bat should bunch up and become taught based on the position of the bat the splashes in the puddle should react when the torch hits it and finally the smoke should curl up and out from the position of the torch's final resting place as you can see combining pose to pose and straight ahead animation helps you plan out complex scenes with relative ease you can focus on the pose to pose animation without being distracted by the straight ahead content and when creating the straight ahead content you have the pose to pose motion to support and inform it that's it for straight ahead and post opposed next up is follow through and overlapping action so let's talk about follow through and overlapping action the two terms describe similar but separate techniques and you can kind of think of them as the opposite of anticipation which we've spoken about in a previous principles episode just like a subject has to anticipate a movement by winding up to it things don't just stop all at once the subject or parts of the subject should continue to move after the main body has come to a stop here's an example with no follow-through and the same example with follow-through applied follow-through basically comes down to certain parts of a subject overshooting the main subject's stopping point just like our character anticipated his jump he has to follow through on the landing different objects follow through in different ways long flowing hair will follow through in a natural free-flowing manner whereas something more rigid like a spring will move differently just like we discussed in our straight ahead and pose to pose episode it's often easier to animate the main body of movement then go back and animate the follow-through action straight ahead overlapping action is a similar concept but describes how different parts of a subject should start and stop moving at different times or overlap each other let's take our pendulum animation from the squash and stretch episode here the character's body moves first and for a few frames the limbs don't move then they begin to catch up starting later and overlapping the main body's action sometimes even moving in the opposite direction to the body this overlap breaks up the animation into different movements and adds a lot to the feel or polish of the animation another example would be a character hammering in a nail here's the example with no overlapping action and here the arm moves in three parts overlapping each other the upper arm moves first then the lower arm then the hand creating three parts of overlapping action each being dragged by the previous segment much more interesting than the basic version the term i just mentioned drag is sometimes thrown around too and basically refers to the amount that an object will overlap or follow through something floppy will drag a lot more than something rigid just like our hair to spring comparison earlier the final term you might hear is keeping the animation alive this is the act of tracing an object for a few frames after it stops moving to add a little boil or wobble to the lines this keeps the animation alive by adding interest even though the subject has stopped moving that's it for follow through and overlapping action next up is slow in and slow out so let's talk about slow in and slow out or as it's more commonly referred to these days ease in and ease out this is a super important principle that basically says most movement isn't linear most things start moving slowly speed up and then slow down before stopping if an object moves at one speed starting and stopping without slowing and slow out it looks unrealistic mechanical and unnatural which of course could be what you wanted but in most circumstances it just doesn't look real a character might slow out as they prepare for a big action like winding up to push a heavy object or there might be barely any slow in just one or two frames for a character that is launching into a fast run but even in these scenarios those one or two frames make all the difference in the world of course just because our slow in here has relatively few frames our character is moving quite fast so the slow out would take much more time as the amount of energy in one direction has to be counteracted barely any slow in but a lot of slow out you can't just apply slow in and out everywhere though a falling character wouldn't slow out as they approach the ground but they would slow in and out as they approach and leave the apex of their bounce if a ball is flying straight at a character there'd be no slow in or out on the ball at all it'll be completely linear but the character would slow into the hit and out of the follow-through basically different scenarios require different amounts of slow in and out but it's almost always present that's it for slow in and slow out next up is arcs so let's talk about arcs it's very rare that objects in the real world move in straight lines moving along a curve or arc of motion makes for a much more natural and realistic animation let's take this simple picking up a ball animation moving straight up and down to pick up the ball looks a little robotic and stiff whereas if we add even a subtle swoop or arc to the motion it makes it feel much more engaging and natural straight away no arcs stiff with arcs much better in this swinging bat animation most of the action should happen along the horizontal axis as he swings the bat around but adding a nice arced motion in the vertical axis makes this shot feel more real and look more appealing even if it is exaggerated which to my mind all animation should be anyway obviously some things do move in straight lines like this ball on approach 2 and away from the character but even here if we were to pull back the camera the ball would move in an arc eventually just use your common sense speaking of common sense if you were given these two keyframes for a pendulum animation placing the breakdown here would make no sense it's obviously wrong the string has shortened you should place it lower this is an example of where something would have to move in an arc or it would break physics there's not much more to say about arcs really other than if you're struggling with the animation draw out your arc of motion first even as just a general guide then animate your action to that arc this will really help with keeping complex longer shots smooth that's it for arcs next up is secondary action so let's talk about secondary action secondary action is less about animation specifically and more about storytelling secondary action is any additional animation that supports and reinforces the primary action of the scene the primary action is whatever is the most important action of your shot this could be a character pushing another character like we saw in our anticipation episode the act of pushing the character is the primary action we use secondary action to make this animation more interesting we want to convey that the character is heavy so the wind up to the push would be a piece of secondary action that reinforces the push additionally the character's facial expression as he pushes building up in pressure before releasing helps to sell the weight of the movement pushing is the main action the wind-up and the facial expression is the supportive and reinforcing secondary action this character stubs his toe and gets angry that's the primary action adding him hopping up and down turning red and fuming smoke from his ears all reinforce the primary action helping to sell the anger it's important to note that secondary action is not the same as secondary animation which it's sometimes confused with an example of secondary animation is your follow through and overlap the head movement is the primary action of the scene but the hair movement is not the secondary action it's just good animation it doesn't support or reinforce the primary action in any way it's just dependent on it so let's take this from the ground up because changing the secondary action can completely change the scene let's take a simple action like a character cutting a slice of cake that's the primary action let's give him some character by having him drool as he cuts the cake the secondary action reinforces his emotion he's anticipating this cake so much now let's slow the cut down then let's add him sticking his tongue out finally let's add drops of sweat two stages of additional secondary action the facial expression and the sweat show him really concentrating on cutting this cake now instead let's have his hand shake as he cuts the cake okay let's have him bite his lip nervously that's not enough let's have him cover his eyes and peek out from behind his hand why is he so terrified of cutting this cake as you can see adding secondary action to your scene is super important it really sets the difference between just an animator and a storyteller that's it for secondary action next up is timing so let's talk about timing this is a simple one actions take time changing how long an action takes changes how the action is understood by the audience on a purely physical level correct timing makes objects appear like they're following the laws of physics pushing something heavy takes longer and pushing something light happens quickly if your character is jumping in the air and they move too quickly it doesn't look realistic or convincing the same for too slowly often times it's actually helpful to film yourself performing an action like picking up an object for example to time your animation correctly you can use keys extremes and breakdowns which we spoke about in our pose to pose versus straight ahead episode to plan out your shots and ensure the timing is correct of course you don't have to follow physics if you don't want to but like anything in order to break the rules properly you have to know them in the first place timing and animation is all done on frames usually 24 frames per second this means 24 drawings are needed to fill a second of footage this is called animating on ones usually animators animate on twos drawing every other frame to save time also to stop things like line wobble or boil on frames are very similar which can be pretty distracting usually animators will switch between twos and ones depending on the action for very fast or complex motion animate on ones or some of the detail might get lost for most motion animating on twos or even threes if you're doing cheap anime seems to work fine let's look at an example of how changing the timing can change in animation's meaning here's some extremes and breakdowns showing a character reaching out picking up a bug and bringing it close to their face if we use just a few frames for this animation our character is snatching up the bug to stop it getting away or even to squish the poor thing add in lots more frames and he is reverently reaching out in awe at a rare species of insect in order to not spook it same action opposite meaning purely based on timing as you can see timing is a very powerful tool to have and understand in your arsenal and knowing how to use it properly can change your entire animation game that's it for timing next up is exaggeration so let's talk about exaggeration animation is exaggeration if animation follows real life too closely it loses so much impact rotoscoping the process of drawing over live footage or 3d models can be a good example of where the charm and nuance of motion is lost when we stick too close to real life this isn't to say rotoscoping animation is wholly bad there are some fantastic examples out there sure we can reference real life to get the broad strokes right but then to make great animation we should take that movement and exaggerate it the things we animate don't actually follow the laws of physics so exaggerating things like weight or impact really helps to sell the animation to the audience this is kind of similar to the principle of staging wherein we use various techniques to reinforce an idea like our angry man from before he stubs his toe and is angry about it seems fine but when we add him hopping up and down turning red some extreme expressions and smoke coming out from his ears we realized just how boring the first animation was it's all about exaggeration they're not mad they're furious they're not happy they're elated they're not strong they're ripped they're not cute they're sickeningly kawaii af sorry let's take a perfectly serviceable slap animation seems quite impactful no let's exaggerate the wind up now the impact finally the follow through much better you can apply this idea to anything character emotion color movement whatever it doesn't matter animation is exaggeration that's it for exaggeration next up is solid drawing so let's talk about solid drawing solid drawing is the practice of drawing your animations as if they have 3d volume in order to lend a greater sense of weight balance and realism to their movements at this point it's probably important to remind you that these are disney's principles of animation and if your style leans towards a heavily stylized 2d then obviously this principle will be less important but even in a 2d stylized animation it helps to know how to draw your characters with volume from any angle so don't close this video or you'll make red ball guy cry solid drawing helps add weight and realism to your animation even on simple characters like ours when our red character turns around his face doesn't move across his body like a flat circle but instead curves around it as if it were a sphere even our actually flat square character can do the same thing even though i made the conscious design choice to make him a square as opposed to a cube because otherwise he doesn't look like the same style of character as our red guy it's useful to start with simple shapes when trying to draw solidly building up the rigging or bones of the character before adding the detail on top when you do add the detail make sure your linework supports the form of what you're drawing if one section is in front of the other draw an overlapping line to reinforce this this helps sell the 3d volume of the shape drawing in perspective helps sell the idea of realism too so rather than drawing in an isometric or parallel view try to add perspective to your forms if you struggle with this on complex shapes like i do then cheat sometimes i model basic shapes in 3d software like blender then draw over the top of them to add the details if it works then it works to summarize regardless of your actual style thinking of your drawings as 3d objects rather than flat shapes will help to reinforce your animation and make it more believable that's it for solid drawing next up is appeal so let's talk about appeal appeal in animation is all about being dynamic it doesn't necessarily mean nice to look at because that's subjective but instead to my mind you can replace the word appealing with engaging everything your animation is doing from character design through to exaggeration should be working to make your animation as engaging or appealing as possible with this in mind you can kind of think of appeal as the culmination and combination of all the other principles of animation plus a little something extra on top whilst the other principles are about making believable animation appeal is about focusing on what we're trying to convey and doing that in the best possible way let's take this footage i recorded of a bouncing ball as you can see not much interesting stuff is happening here but our bouncing ball from the first principles episode is a lot more appealing to look at there's a ridiculous amount of squash and stretch it's exaggerated over the top and ridiculous but these aspects add to the appeal of the animation making it more engaging sacrificing realism for appeal when it comes to characters you should highlight their features to better show their personalities even with stupidly simple characters like our ball and square we can emphasize certain features like eyes mouths and postures to reinforce the message if i may let's step away for a moment from our simple characters to examine an example with more anatomy the appeal of the two characters shown in this animation comes from their contrast between each other one is lanky flowing and willowy the other chunky round and short their proportions size and colors reinforce their personalities and messages making them more appealing to the audience both in isolation and when paired together when we break them down into their core shapes we can see how this contrast helps sell their appeal blue guy is made up of shapes with hard corners tall thin reverse triangles and the cool blue color makes him seem reserved and distant red guy is nothing but short squat ellipses with soft curves and features this makes him seem bouncy bubbly and approachable and the red color reinforces this idea of compressed energy compared to here where i've made them similar shapes and sizes look at them side by side and tell me which you think works better i'd say there are three things to keep in mind when working on an animation or character's appeal number one should you stick closer to real life or does moving away from reality help reinforce the animation's message two contrast and exaggeration of proportion emotion and personality is super important and three keep it simple and focus on one or two important aspects to make your point so that's it for appeal and for the 12 principles thank you so much for joining me on this awesome journey i hope you've learned something whilst watching this series and i can't wait to see you all again on the next episode whatever that might be so make sure to subscribe and ring the bell so you're notified of the next video and i'll see you next time on tiptup if you've made it this far you're an absolute legend just like my level 2 and above members who can get access to exclusive perks and benefits because they are part of the tiptoe zone click the join button below to join [Music] remember to subscribe for more tips tricks and tutorials thanks for watching you