12 Basic Principles of Animation in Motion Design

With the growing ubiquity of digital devices, moving interfaces and adapting technology, motion design has become an important part of a designers creative options. When a designer thinks of moving a graphic, various programs such as After Effects, Edge Animate or coding languages such as HTML5, CSS3 and jQuery come to mind. Mastery of tools does not always guarantee mastery of the craft. Understanding the grammar of what molds the craft and the reason why things are happening is key to creating a meaningful design. The grammar of motion has been around since long before designers had advanced tools, and it will continue to guide designers after the tools have evolved.

An influential work on the grammar of motion 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 animation—be it hand drawn, 3D or experimental animation—the 12 principles can be seen in almost any motion-based design.

.

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.

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.

While this example includes elements of character animation, it’s 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.

---

Learn how to create compelling motion design work with these course from HOW Design University:

• Introduction to Web Animation
• Motion Graphics and Animation Design

---

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.

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.

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.

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 doesn’t detract from or dominate the main animation movement.

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.

The title sequence for Otto Preminger’s 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.

Learn more about Saul Bass’s work in Saul Bass: Anatomy of Film Design.

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.

The Mad Men title sequence shows a silhouette of a man in motion—running 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.

Learn about the inspiration for the Mad Men title sequence.

Appeal

A character with appeal isn’t 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.

HBO’s True Detective - Main Title Sequence

The motion design of the title sequence for HBO’s 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 isn’t 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, it’s the 12 Basic Principles of Animation, but you’ve 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.

First published in March 2015 on HOWDesign.com