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 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!
(Courtesy: design.tutsplus)


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. 
(Courtesy: schoolofmotion)


Means focusing attention on a particular object of your scene. 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. 
(Courtesy: giggleandbytes)

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.
(Courtesy: design.tutsplus)

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. We see how it works 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.
(Courtesy: gifer)

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 orded to create the best end result. Make sure your animation is working along with physical laws. 

(Courtesy: medium.com)


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. 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 exagerrated speed of an object - fill the arc area with half transparent color.  
(Courtesy: giggleandbytes)

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. 
(Courtesy: artstation)