12 principles of animation

Keys, extremes, breakdowns - what are they? How to give your object clear qualities in practice? Animation is a complicated and thoughtful process, which require attention to detail, skills and understanding of how everything in the world is connected, physically and within the meaning.

 Today we'll go through the very basics every motion designer should know and the list of rules everyone follows to create consistent animation. These principles of animation were formulated by Disney animators Ollie Johnston and Frank Thomas, who put together twelve animation fundamentals in their book The Illusion of Life.

Squash and Stretch

Starting with Squash and Stretch, that symbolise how object's values can be affected by action. We can animate totally different objects: soft and hard, heavy and light, liquid, dense or gaseous - they all should be animated considering their qualities. This feature can demonstrate the speed, momentum, weight or mass of an object. Don't forget to keep the object's value the same while stretching!

Anticipation

In order to make the action more realistic, Anticipation principle requires from us to add pre-action to build logical physical sequence. Like in a real life, character needs to gain power, to jump, run or do any other action.

It's all related to Newton's 3-rd law of motion, energy builds up and follows by release energy into an action. Anticipation can prepare characters for the next action, and it's important to make it look easy and natural. 

Staging

Means focusing attention on a particular object of your scene. Thus, staging represents consistency, which you can find in most animations, cartoons, graphics or films - it's the logic of attention. What plays role here along with logic is camera position, focal length, character/objects placement, color grading, actions and expressions themselves and many more. Also, pay attention to the timing - each action should be done after another one is finished. 

Straight Ahead/Pose to Pose

Pose to pose action suits more animations and is more convenient than Straight ahead, as it gives you the control over your animation - you set the keys first, so you know where animation starts, alters and ends; then you set extremes, which allow you to set the “radius” of your animation; and after that you can set breakdowns - to connect extremes. Straight ahead won't allow you to control the values of your object that clearly, and the last scene is more likely to look unequal to the first scene.

Follow Through & Overlapping Action

Stands for parts of object that depend on it  - when object moves first, it's details follow through. The faster main action is, the larger follow through will be. It works as well with hair, animal tails clothing objects etc. This basic principle gives more tangibility to the character or object, allowing it to look real. The main action is finished and overlapping action is processed. Some parts can also be delayed to create the same effect.

Ease In & Ease Out

Also referred as Slow In and Slow Out -is about spacing, which allows you to set your keys not linearly. The object always accelerates and decelerates, both in life and animation. Spacing dictates how objects move - are they far or close, fast or slow. If motion curves are spline, object changes it's moves and speed; our timing stays the same, but animation slows down and speeds up when needed. You can experiment with amount of keys you put in order to create the best end result. Make sure your animation is working along with physical laws. 

Arcs

Arcs can be added to almost any figure movement, because unlike to straight lines, arcs are most attractive for human eye. We achieve this effect by moving the x-Axis constant, while giving the movement in the y-Axis easy-in and easy-out. Linear animation doesn't look natural, that's why it takes audience from actual experience to predictions. Besides, there can be more than two arcs - you will need to experiment with this value too. Arcs can also visibly take part in animation, when you want to show the exaggerated speed of an object - fill the arc area with half transparent color.

Secondary Action

Makes your animation richer or more personalised - If you animate the character, you can show many new details through it's movement, like temper or emotion. These acting layers on top of the main action are giving texture and more realism to your animaton, but the secondary action should not dominate the primary action. Here many principles are connected between each other, so as secondary action with staging. 

Timing

The amount of frames inside of your animation plays key role here. Timing - is one of the reasons, why motion graphics' job can't be taken over by computers - it should not be just natural, but engaging. The standard frame rate is 24fps; if one drawing is made for each 24 frames per second, it's called drawing on once. If one drawing is made for every two frames, it's called drawing on twos and etc. The most common is drawing on twos, because it's fast and makes animation smoother. Drawing on ones suits very fast actions, especially for exaggerated ones. You can create very dynamic effect by placing drawings depending on animation's movements, sometimes in unpredictable places. 

Exaggeration

Gives us unique ability to make things real - those, we can't actually demonstrate in reality. We can create bigger impact by our animation and exaggeration suits it perfectly - it can be easily applied to all other principles of animation. We can minimize unimportant details and maximize those we want to highlight. It can be movement, emotion, or many other things. On the first place, exaggeration exist to convince the viewer in things we want him to believe in. Also, it makes the action more vivid and noticeable. 

Solid drawing

Solid drawing is applied not just for 2d and traditional animation. Is important everywhere, because it demonstrates forms as part of three-dimentional space and gives an object qualities, like volume, weight and balance. When drawing your object, you should make sure lines are bent towards the vanishing point, not symmetrical (unless you want to make them flat), follow the contour, and also use solid objects, like spheres, cubes, and cylinders, instead of circles, squares and rectangles. Use perspective lines on the ground to show distance, relief or many other things. You can use overlapping or many other features to your object - but this surely requires some knowledges of three-dimentional drawing techniques. 

Appeal

Can be called the most subjective of all principles, but is important to any animation you will ever create. Objects or characters, everything can be designed due to it's nature, the role in your animation, main characteristics and so on. Appeal doesn't necessary symbolize something pretty, it firsthand stands for relevance and idea of it's looks. Appeal is all about composition, arcs and exaggeration. The most working way to add appeal to your objects is to make them all different in shapes, proportions, personality, simplicity.

To wrap up

As you can clearly see, all principles are connected between each other, fulfill the bigger picture, rely on physical and logical qualities and deliver the initial idea of the animation. We are sure that you can be the best animation artist you can! Let your imagination guide you and never forget about the basics. 

Learning motion design? You may want to go through it's history.