Principles of Animation: Bouncing Ball

The 12 Principles of Animation

No matter if we draw by hand, with 2D programs, or with complex 3D modeling software, all animation projects follow some fundaments known as the 12 principles of animation. The correct application of these principles will guarantee the level of expression and proper movement expected in an animation.

The 12 Principles of Animation: The Illusion of Life: Disney Animation.
The Illusion of Life: Disney Animation. Source: Notodoanimacion.es

In the beginning, the animations were done with little or no reference from nature. It all started when Walt Disney noticed that the level of animation was unsatisfactory. From this concern emerged a new way of drawing human and animal figures in movement, where the analysis of real action became important for the development of animation.

“When we consider a new project, we really study it… not just the surface idea, but everything about it.”

Walt Disney

From all these exercises and studies, new concepts and several techniques emerged, but they were so innovative that they did not have a name to define them, so it was difficult to explain them among animators. In order to improve communication among them, these new practices adopted proper names, what we know today as Principles of Animation.

Walt Disney’s Twelve Basic Principles of Animation are a set of principles made known by Disney animators Ollie Johnston and Frank Thomas in their book The Illusion of Life: Disney Animation. They represent the starting point for anyone wishing to enter the creative field of animation. Learning and practicing them will not only help you create animation, but will also make your animation lively and meaningful.

Squash and Stretch

The exaggeration and deformation of the bodies, as if they were flexible, serves to achieve a more funny, or more dramatic effect. For this principle, speed and inertia, momentum, weight, and mass must be considered.

The 12 Principles of Animation: Squash and Stretch
Comparison between two circles. The one on the right looks like a bouncing ball because of the principle “Squash and Stretch” has been applied.

This principle is useful for facial and body expressions of characters when you want to emphasize certain emotions and movements.

Anticipation

This principle prepares the viewer for the main action, which the character intends to do. Movements must be anticipated to guide the viewer’s gaze and announce what is going to happen.

Principles of Animation: Anticipation
Comparison between two squares. The superior is prepared to move forward with a slight tilt backward.

This technique is divided into three steps: anticipation (prepares us for the action), the action itself, and the reaction (recovery, end of the action).

Staging

With this principle, we translate the intentions and the atmosphere of the scene into specific positions and actions of the characters. By staging the key positions of the characters we will define the nature of the action. There are several staging techniques to tell a story visually. Hiding or revealing the point of interest, or creating chain actions (action-reaction) are two examples. The effective use of shots and camera angles helps to focus the viewer on the scene.

Principles of Animation: Staging
First, the space is empty. The viewer does not know where the action will be placed. Later, a white ellipse, like a spotlight effect, focused the attention of the viewer in a point, where the ball, the character, appears.

The main goal of the staging is to tell the viewers exactly where the action will occur so they don’t miss anything. This means that only one idea is produced at a time, or else viewers may be looking at the wrong thing. A good example of staging in motion is the eye, which is drawn in a movement in a still scene.

Straight Ahead Action and Pose to Pose

In direct action we create a continuous action, step by step, until it ends in an unpredictable action. In the action pose to pose we break down the movements into structured series of key poses.

Top: Pose to Pose. Below: Straight Ahead.

The direct action gives fluidity to the movement and provides a fresh, loose, and casual look. In the action pose to pose we develop an initial approach. It is a more controlled animation that is determined by the number of poses, and the intermediate poses. These two techniques can be mixed.

Follow Through and Overlapping Action

These two techniques help to enrich and give detail to the action. In continuous action, the character still moves after the main action. In the overlapping action, multiple movements are mixed which influences the character’s position. Virtually nothing stops at the same time.

Principles of Animation: Follow Through and Overlapping Action
The square increases and decreases its size. It looks like a square moving forward, stops suddenly, and goes backward. The slightly bounce responses to the principle of Follow Through and Overlapping Action.

Slow-in and Slow-out

It is a matter of speeding up the center of the action, and slowing down the beginning and the end of it. In the physical world, objects and humans apply the impulse before they can reach maximum speed. Similarly, it takes time to slow down before something can come to a complete stop.

Principles of Animation: Slow In and Slow Out
Comparison between two circles. Both circles follow Squash and Stretch principle. Both look like bouncing balls. However, the one on the right goes down fast, hits a surface, and goes up very quickly until it cannot overcome the force of gravity. At that moment, the ball is suspended in the air for a brief period of time. This principle is about acceleration and inertia.

Arcs

By using arcs to animate the character’s movements we will be giving it a more natural look, as most living creatures move in curved trajectories, never in perfectly straight lines.

Principles of Animation: Arc
A bouncing ball goes forward in arcs.

When a person is shooting an arrow, they are barely flying in a straight line. Gravity causes moving objects to arc between the start and endpoints. Even many of the natural movements in the human body move in arcs, such as arms, hands, and fingers, etc.

Secondary Action

It consists of small movements that complement the main action and, in fact, are a consequence of it. The secondary action should never be more marked than the main action.

The bouncing ball is the primary action, the shadow underneath is the secondary action. The shape and position of the shadow depend on the ball.

In the physical world, we can observe primary movement only in movement if a person is walking. Secondary actions, such as a person swinging his arms while walking or “birds” waving their feathers, help support the primary movements. Even smaller actions, such as eye blinking, are also considered in secondary actions. In secondary animation, it is important that the main animation is not diminished.

Timing

Timing gives meaning to movement. The time it takes a character to perform an action, or the interruptions and hesitations in the movements define the action. It also helps to give an idea of the weight of the model, and the scales or sizes.

Principles of Animation: Timing
The amount of frames and pace affects the movement of character.

This principle also helps to establish the personality of the characters and the emotions they want to express. They used pace as the main tool to communicate personality through flat shapes that are representative of body parts.

Exaggeration

Accentuating an action usually helps to make it more credible. It basically involves altering the physical characteristics of a character so that it can capture the attention of the audience. This principle emphasizes the physical features of a character as well as their behavior, condition, movements, etc.

Principles of Animation: Exaggeration
The circle moves like a bouncing ball. Each time the ball hits the surface, it causes a reaction. The movement of ground has been exaggerated to emphasize the bouncing.

Solid Drawing and Solid Posing

Good modeling and a solid drawing will help bring the character to life. It means that the animator must-have skills to understand three-dimensional shapes in terms of weight, balance, light, and shadow. Character poses should be clear and expressive with easily recognizable silhouettes. It means drawing their image in such a way that it looks alive, considering their center of balance and weight distribution.

Principles of Animation: Solid Drawing
The shape, light and shadow of this circle make it looks like a ball. Even more, viewer could guess the material, and weight of the ball.

Appeal

It’s about providing an emotional connection with the viewer. The personality of the character must be consistent with the way they move. An attractive character is not always pretty. Even ugly or evil characters with a certain level of charisma can gain the empathy of the viewer if their appearance fits their personalities.

Principles of Animation: Appeal
Appeal creates emotional connections with the character. BTW… What are they both talking about?

Interesting Insights

The 12 principles of animation are the foundations on which well-executed animation projects rest. These principles are not rigid rules to be followed, but they are proven theoretical tools.   

Together with the basic concepts of animation, constant practice, and a creative attitude, it is possible to achieve an artistic style that is particular to the animator. These characteristics combined with the application of these principles will undoubtedly result in a unique, original, and distinctive product that will be appreciated by viewers.

Be Creative! … and Have Fun!

Bibliography

Books for Animators  - The Illusion of Life - Frank Thomas and Ollie Johnston
Books for Graphic Designers.
  • Dondis, Donis A. La sintaxis de la imagen. Editorial Gustavo Gili. 2017.
  • Jackson, Chris. After Effects for Designers: Graphic and Interactive Design in Motion. Routledge. 2017.
  • Johnston, Ollie; Thomas, Frank.  The Illusion of Life: Disney Animation. Disney Editions. 19995.
  • Poulin, Richard. Fundamentos del Diseño Gráfico. Promopress. 2016.  ISBN-10: 8415967896.