The 12 Principles Of Animation

Principle 1: Squash and Stretch

Squash and stretch is when an object is animated in the way of adding weight. An example of this could be a ball bouncing, or maybe a stomach wobbling when a larger character stands. The stomach would appear smaller and squashed while the character was sat, but as he stands it would stretch outwards and grow. This could add the effect of dominance or grandeur to a larger character. In the GIF from Aladdin shown below, the king is squashed as he lands on the floor after falling and is stretched when he raises his hands before he attempts to take the cloth from the tiger

Related image
Image result for squash and stretch gif

Principle 2: Anticipation

Anticipation is when an animated character or object does something before the action that adds effect e.g. a characters mouth compressing before they speak or for another example the heel of a foot pressing down before a step. Anticipation is one of the most important steps of the 12 as without it even if all 11 other steps are done amazingly the animation can be left feeling robotic and less fluid than wanted. The Gif below shows a stickman swinging a hammer, the anticipation of him holding the hammer back adds power to the eventual action.

Image result for the 12 principles of animation anticipation
Image result for anticipation animation gif

Principle 3: Staging

Staging is basically where objects or characters are placed on screen. When creating an animation, you want to place what you want your audience to see in the forefront, and less important things at the side or in the background. Staging can also be things as small as what direction characters are facing while talking. an example of staging could be if a character smokes, it is shown in a way that the character faces a way that shows the cigarette in the characters mouth close up in the centre of the screen

Image result for animation staging
Image result for animation staging

Principle 4: Straight Ahead Action and Pose to Pose

Straight ahead action is when an animation is done frame by frame start to finish where as pose to pose is an animation where its instead done with a few of the main poses and the intervals between each pose are filled in afterwards. These are two different ways of animating a scene. If we use the image below to go off, an animator using straight ahead action would draw each image of the man from 1 to 8 but an animator using pose to pose would go from 1, to 3, to 5 then finally 7 and 8 and fill in the missing animation afterwards.

Image result for animation straight ahead and pose to pose
Image result for animation straight ahead and pose to pose gif

Principle 5: Follow Through and Overlapping Action

Follow through is when an animation is made to appear like it follows the laws of physics, for example if a character jumps and his arms keep moving even once he stops the action. Overlapping action is similar but instead it is about how different parts move at different rates. In the gif, the cat with follow through and overlapping action looks more realistic and overly cat like that the one without. The one without jumps more how a frog (which wouldn’t weight near as much) would jump.

Image result for follow through and overlapping action gif

Principle 6: Slow In And Slow Out

Slow in and slow out are exactly what the title says. In animation, it is when more frames are added to the front and back end of an action to make the final piece appear like it speeds up at the start and slows down at the end. This ends up making the animation appear more engrossing than if it just stayed at one consistent pace. It can also add effect to other actions a character could do as there are more frames in the middle of the action.

Image result for slow in slow out gif

Principle 7: Arc

Objects in animation are best off if they follow the laws of physics (unless the plot says otherwise i suppose). When an object moves or jumps, you want to do your best to reflect those laws. For example if a frisbee is thrown, it would hover through the air for a little while before it lands, where as if a ball was thrown it would fall far quicker and bounce unlike the frisbee. You must animate your objects accordingly.

Image result for throw animation gif

Image result for arc principle gif

Principle 8: Secondary Action

Secondary actions are actions that happen while others do. For example, a characters hair or bag bouncing as they walk, or a car exhaust releasing some smoke as a car drives. I slightly touched on this principle in the description of principle 6. Secondary actions end up being the heart and soul of an animation, if an animation has a lot of key details animated in a charming way it makes it overall more lovable.

Image result for secondary animation gif

Principle 9: Timing

This principle is all about how the timing of an animation should be done in the way that most accurately follows the laws of physics (again, unless the plot so demands). This is to make an animation more believable, as opposed to having an object behave unorthodox which can break the experience of an animation for the viewer as it takes them out of the world the creator is trying to create. The kick belows timing makes it look more powerful, fast and hard! exactly how you would expect from the context of a fighter. Timing also can add effect to what material an object is made up of, as shown in the animation below. The ball on the right behaves more like a metal/heavier object would as it hardly bounces and finishes its animation cycle sooner. The ball on the left behaves more like a rubber bouncy ball.

Image result for timing principle cartoon gif

Image result for timing animation gif

Principle 10: Exaggeration

Exaggeration is the counter to all the “law abiding” physics principles we’ve been through. This is when an animation is purposefully over the top to make it more dynamic. It makes an animation more fun as well as adds character to whatever is being exaggerated. As an example, cartoons like Looney Tunes are iconic in the field of exaggerated animation.

Image result for looney tunes exaggeration gif

Principle 11: Solid Drawing

This principle is basically just finding a drawing style and sticking with it through out the animation. An animator needs to be able to take form and anatomy, weight and volume, and lights and shadows into account. They also need to be able to draw in 3 Dimensions. If an animations art style has misshaped objects it needs to be consistent in all of the animation.

Image result for solid drawing animation

Principle 12: Appeal

There is no right way to do this principle. Giving an animation appeal can mean anything as appeal is subjective, however, an animation with an easy to read design, solid drawing and personality is more likely to pull in an audience than an animation with none of which. This principle can be the hardest of all for some, but if completed well will no doubt make your animation a success. I use the simpsons as an example here as even by just looking at the picture below, each character separately almost breathes personality. The simpsons is a show stocked full of loved characters and this is helped so much by this final principle

Image result for the simpsons all characters

Leave a comment