7 Animation - The 12 Principals of Animation

An influential work on the grammar of motion design is the 12 Basic Principles of

Animation, first introduced in the book The Illusion of Life: Disney Animation. The
Illusion of Life was written by Disney animators Ollie Johnston and Frank Thomas, two
of the master animators referred to by Walt Disney as the Nine Old Men. No matter
the style of animationbe it hand drawn, 3D or experimental animationthe 12
principles can be seen in almost any motion-based design.

12 Principles of Animation

While there is a clear difference between human character animation and motion
design (or motion graphics), the 12 principles are still applicable across these
processes. Designer and animator Cento Lodigiani describes the 12 Basic Principles of
Animation in a series of short animations using a simple cube. This graphical
examination is a perfect analogy demonstrating how the principles can be applied to
motion design.

The following is an examination of the 12 principles as they relate to motion design.

While some principles relate closer than others, there are parallels in each one that
can be related to the design realm. I will describe each principle as it relates to
traditional animation and then (below the video), I will demonstrate a motion design
parallel.

Squash and Stretch

Adding exaggeration to an object in motion gives it a greater sense of weight and

volume. This principle is often demonstrated with a bouncing ball: the ball appears
stretched when it is falling and squashed when it hits the ground. By squashing and
stretching the ball, an animator gives a more realistic feel.

Squash and Stretch

This motion design example, What it takes to be original, uses squash and stretch
to morph objects, such as the rounded corner rectangle seen in (00:02-00:05). The
subtle use of squash and stretch adds a sense of weight and volume in the flat tone
graphics throughout the motion design.

Staging

Influenced by theatrical principles, staging helps establish mood, create focus and
clarify what is happening in the scene.

Staging

While this example includes elements of character animation, its a perfect example
of staging in a motion design. There are no extraneous details in the background,
which helps keep the main focus in the center even though the scene is always
moving.
Straight Ahead Action & Pose to Pose

Straight ahead action refers to the technique of drawing each pose, one right after
another, which can yield a fluid animation style. Pose to pose refers to the animation
technique in which key frames are planned ahead of each other and then connected
to afterward. Pose to pose usually leads to a more proportional animation that is
convincing to the eye.

Straight Ahead Action & Pose to Pose

While not a true animation, the title sequence for the movie Juno uses a form of cut
paper and a rotoscoping-like technique to provide a dynamic style with straight ahead
action. The creative team used a process of capturing each step of the actor walking
and then visually translated all the actions to individual images.

Slow In and Slow Out

In the physical world, objects and humans need to pick up momentum before they
can reach full speed. Similarly, it takes time to decrease speed before something can
come to a complete stop.

Slow In and Slow Out

In the motion design of the TEDxTianhe Opening, Slow In and Slow Out can be seen
in the circle (00:02-00:04), moving within the oval and falling. Even in objects that do
not have a perfect form, such as the odd-shaped cube (00:16-00:20), Slow In and Slow
Out is used to ground the motion graphic in reality.

Arc

When someone shoots an arrow, it rarely flies completely straight. Gravity causes
objects in motion to arc between the start and end points. Even many of the natural
movements in the human body move on arcs, such as the arm, hand, fingers, etc.

Arc

In the visual poetry Happiness, the creator uses many full and half circle forms to
draw lines, move color, shape and reveal some of the letterforms.

Secondary Action

In the physical world, we can observe primary movement in the motion of a person
walking or a bird flying. Secondary actions, such as a person swinging their arms as
they walk or a birds feathers rippling in the wind, help support primary movements.
Even smaller actions, such as blinking, are also considered secondary actions. In any
secondary animation, it is important that it doesnt detract from or dominate the
main animation movement.

Secondary Action

In the Penguin Drop Caps Animation above, the letterforms are beautifully drawn
onto the composition, and once the main animation is done, the visual rest is
supported by a subtle secondary action. In particular, take a look at the flames
around the B (00:07-00:10) and the little bugs on the C (00:14-00:17).

Timing

In a true animation, timing is an essential aspect of the way frames are drawn. Timing
also helps in establishing personality of characters and the emotions they express.

Timing

The title sequence for Otto Premingers Anatomy of a Murder was created long before
advance computer motion technology existed. Iconic graphic designer Saul Bass used
timing as the main tool to communicate the personality and emotion through flat
shapes that represented body parts.

Solid drawing

Solid drawing takes an enhanced level of realism to the skill of drawing, adding good
form and a three-dimensional feel to an animated work. No matter what tool (pencil
or computer) is being used to create the drawing, it must work in three-dimensional
space.

Solid Drawing

The Mad Men title sequence shows a silhouette of a man in motionrunning and
falling from a building. In all poses, the character has a solid form and looks realistic
in the three-dimensional space, even when that space changes around him.

Appeal

A character with appeal isnt always attractive. He or she can be an ugly or evil
character with a certain level of charisma that is makes sense within the story. In
motion design, appeal can be established before anything moves by choosing an
interesting typeface, creating a visual translation, or juxtaposing images.

Appeal

The motion design of the title sequence for HBOs drama series True Detective is a
perfect example of design with appeal. With very little movement, the eye is drawn
into the composition by the interesting montage of the character and scenery. Again,
the title sequence isnt appealing in the sense that you want to go on vacation there,
but the visual appeal of the show is ever-present.

So you say to yourself, its the 12 Basic Principles of Animation, but youve only
shown nine. Very true: Anticipation, Exaggeration, Follow
Through and Overlapping Action are not among the examples above, but they are
just as important. The next time you watch a commercial, a movie or a motion
design, look for the remaining animation principles. Whenever you can, continue to
examine and build upon your motion design grammar. While tools will change over
time, the principles and grammar will always be there.

Here is another useful link!