12 Principles of Animation

P
U
F
12 Principles of Animation by Frank Thomas and Ollie Johnston. Much on the information within this blog post came from this source.

1. Squash and Stretch

Speed changes the object depending on the mass.

The mass, momentum, speed and weight all determine how much squash and stretch an object has. The amount the object squashes and stretches is determined by its mass. Softer objects will squash more (e.g. water balloon) than stiffer objects (e.g. cannon ball). Volume amount must be maintained by controlling the coloration between length and width, the longer it gets the thinner it gets also. Squash and stretch can also be applied to facial expressions.

2. Anticipation

Purpose or effect of anticipation:

  • Prepare for the main action.
  • Make the main action more visible.
  • Gives the audience a clue to what is happening next.
  • Makes the action seem more realistic.
  • Audience ease of understanding of the action.

For example, a spring that coils before releasing:

Without the action of anticipation can result in a lack of power to the movement. Also, without this principle, the main action could happen too fast, and not be visibly clear, or entirely missed. The most important event is the main action, therefore, they cannot be performing any competing actions.

Another form of anticipation is the eye movement. Almost all of the main actions are preceded by the eye movement. The eyes move first, and the head, then the body follows.

3. Staging

This principle describes the animator’s manipulation of the action within a scene, it is primarily how the scene is set up for the audience to experience. For example, the order that the action happens which controls where the audiences eyes move around the screen and on which subject. Staging refers to acting, timing, setting camera angle and position. Having actions happening at the same time, or competing for stage presence and the audiences eyes, is a form of bad staging (if it is not intentional). This results in the viewer’s confusion, not knowing which to look at. One action should finish before the other one starts. Pauses are helpful for better staging as well, such as when a character takes out an item. A shot with text on the screen should be held for the amount of time that it takes to say it out loud three times.

Therefore, controlling the character’s presence on the screen is key. Have the protagonist further away when he is completing a big action. The closer the camera is to the subject the better for smaller gestures or expressions. The main actions should be either in the centre or one of the thirds.

Image from the Jurassic World movie.

If they are facing on side, then there should be more empty screen space on that side. Unless there is another persons action behind them, then the focus would be on the person behind like in a horror movie.

Staging is also an idea and how this idea is translated to the audience. Such as a decrepit house- emphasise the parts which make it look more decrepit.

Before.
After.

4. Straight Ahead and Pose-to-Pose

This principle is best described visually.

This term describes two methods to animate drawings. Straight ahead animation is when the animation drawings are drawn in order, one after the other. There is a beginning and an end reaches consecutively. Although, with this method you may make mistakes like the character being a different size, position or level to where you need it at the end of the animation. Nonetheless, this type of animation is best used for objects with unpredictability such as fire, water, clouds of dust or explosions etc. The reason straight ahead animation works well for these is because of the physics behind the motion that are hard to predict how it works with pose to pose.

On the other hand pose-to-pose is when the animator draws the key frames or poses of the character first and then goes back to fill in the gaps. This method is generally better for most actions as you have the most control. This can help moving character animations as you determine all of the important parts of the action early on in the animating process. This is since you decide where the character ends up early and work backwards.

Pose-to-pose terminology:

  • Main poses called Keys. (start and end)
  • Secondary poses called Extremes. (the farthest the character will go in each direction).
  • Further broken down poses called breakdowns (connecting the extremes).

5. Follow-through and Overlapping Action

This is the technique of having body parts, appendages dragged behind the rest of the body and continue to move when the body stops.

Follow-through refers to how the parts of the body continue to move after the body is stopped.

Overlapping action describes the offset (distance) between the timing of the main body and its other parts.

Drag describes the technique of delaying he movement of the body parts in relation to the main body.

All of these add realism to the character. 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 also true of the body, when it comes to a stop after a movement, often the body will follow through the movement further and then come back. For example, a character jumping forward, when he stops his body will move forward from the momentum before the rights himself straight.

Similar to squash and stretch, the mass of the object determines the amount of drag applied. For example, he difference between a feather and a TV antenna moved quickly.

Follow-through and overlapping action occurs on a characters moving limbs. For example, in a walk-cycle, with the character’s swinging arms- the forearm will drag slightly behind the elbows and the hands will drag slightly behind the forearms.

Offset could also be used to offset when limbs move, separating their timing to make the character seem more realistic. E.g. Jumping with legs offset from each other.

6. Slow-in and Slow-out

This principle describes the fact that all movements start slowly, builds speed and finishes slowly. This is imperative to achieving life-like motion. Robots are the only things that move their parts at a constant speed.

After you draw the extremes (the middle drawing in this case). Then you draw in-betweens at every half on each side closes to the extremes, as can be seen in the image above. You can add more frames if you
Here the one with the slow-in and out seems more natural and realistic.

Slow-in and out in 3D and motion graphics:

Here you need to change the motion curves from linear to spline by adjusting the Bezier handles.
Like this.

7. Arcs

No organism or object in the natural world moves in straight lines, perfectly horizontally or vertically, but in a circular path: arcs.

A leaf falling, a dog jumping etc. Only a robot has linear movements. A bouncing ball cannot move linearly straight from and to the extremes, but move in an arc shape.

The movement of this rectangle like this would be a mistake. The rectangle would change size.
You need it to follow an arc in its movement.

8. Secondary Action

This is associated with overlapping action but it is not the same. Secondary actions are gestures that support the main action to add more dimension to the character animation.

(PA: Primary action, SA: Secondary action). To use the image above as an example:

  1. PA: Knocking on the door. SA: the second arm which describes sneakiness.
  2. PA: Angrily stomping feet while walking. SA: arms swinging up and the facial expression.
  3. PA: Picking up the box. SA: Rubbing hands before picking it up.
  4. PA: Taking a bite of the burger. SA: The facial expressions.
  5. PA: Tear falling and turn head. SA: hand wipes the tear.

While both must be visible, you must not let the secondary action dominate the primary.

Each of these secondary actions would also count as appeal, as it is giving information about the characters personality or emotions through these small details.

9. Timing

The Timing principle state that the personality and nature of an animation is greatly affected by the number of frames inserted between each main action. This principle is best described visually:

With many drawings in-between next to each other, the animation will appear slow. Few drawings far apart from each other, the action will be very fast. The amount of frame you give an animation can have millions many of different meanings.

The standard frame rate for movies for movies is 24 fps, whereas for video games it is 60fps.

One’s or Two’s or Three’s. If 1 drawing is on each frames, 24fps, then that is called drawing on One’s. If one drawing is made for every 2 frames, then that is called drawing on Two’s. The same goes for three’s. It is very common to draw on two’s rather than one’s. Firstly because it cuts the amount of work time in half. Secondly, it makes slow actions appear smother, since the precision needed to draw in between two very close drawings can make the animation feel jittery. Some would say that drawing on two’s is better for fast actions as well. Since it gives a spirit to the animation that would be more lively than if drawn on ones. However, drawing on ones is necessary when animating a very fast action that needs to be read clearly, e.g. a scramble or flurry of activity. Some draw more or less frames depending on how much movement there is. This can make it very dynamic.

10. Exaggeration

Exaggeration is when every action, pose or expression can be taken to the next level to increase the amount of impact on the viewer.

Exaggerating the animation does not mean to make the physics and proportions more consistent with reality. But rather to make the idea or essence of the action more apparent and real. Sad character- make them look sadder. Exaggeration doesn’t mean more distorted, but more convincing. Exaggeration could add power to a hit. Or to enlarge a shocked expression.

Exaggeration example in Tom and Jerry.

When the action is quick, the exaggeration needs to be bigger (e.g. stretching the peak frame), in order to make it noticed. To boost it’s presence you can either make it stay on screen longer or make it more extreme.

11. Solid Drawing

Solid drawing is the principle about making forms feel like they are in 3 dimensional space with volume, weight and balance. E.g. drawing lines no a circle would follow the contours of the surface, they would not appear horizontal. or it would feel flat.

When drawing 3D objects, always refer to the vanishing point(s), do not just draw parallel lines.
When making a rough pas of the character, use simple 3D shapes.
Draw perspective lines to construct accurate geographical movements and sizes of the character.
Symmetrical lines look flat. Try to pair a straight line with a curved line, or offset two curved lines. This will look more natural and dynamic.

Avoiding symmetry in animation also counts, try to avoid ‘Twinning’. This is when the arms and legs, and other paired features do the exact same thing.

12. Appeal

Appeal is everything that makes up the character which emphasises the character’s differences or personality through visual aspects. It helps make the character more likable in the way that they are presented to the audience. This is in terms of not only design but also the animation style and details.

Everyone’s standard for appeal may be different but there are places where you can make everyone happy.

Dynamic design can boost the appeal. Some ways of doing that are:

  1. Use a variety of shapes (when designing the character).
  2. . Play with proportions (cartoonists often magnify interesting visual aspects or shrink the things we may find ugly boring). Find the aspect that defines the personality and blow it up.
  3. Keep it simple.