November 15, 2018

Our 10 Principles of Animation

Think Joule has been around for nearly 10 years now, and while you’ve probably seen the work of my extraordinarily talented coworkers, you may not have realized a new face has joined the ranks here. My name’s Matt, and I’m the newest addition to the Joule team. I’ve got a pretty eclectic creative background, but my primary role is that of Motion Designer.

Motion Design is an ever-evolving field, but it really got its start in the mid-70’s. Since the revolution of the personal computer, however, it’s become more and more accessible, advancing exponentially as a result. Now we can create and animate quickly, without needing a full animation studio to pull it off. That said, it’s important that Motion Designers and Animators alike revisit their roots. The way we do this is by referencing the 12 principles of animation – devised by none other than the original animation team at Disney. I’ve taken the liberty to condense and refine this list towards a motion-design-specific end.

Some are more relevant to motion design (think animating type on screen and graphic shapes to lead the viewer through a story) as opposed to traditional animation, where you’re typically drawing scenes frame-by-frame, but in the end they’re all about creating a real connection with an audience. We want to get the viewer to feel the movement on screen. We want them to be excited and engaged. Here’s how we do that.

1: Squash and Stretch        

This is the most important technique in the animator’s toolkit, and one you’ve definitely seen if you’ve ever watched any professional animation work. The effect is taken directly from life, and reflects the physics of a body moving through space and time. As velocity increases, a body will elongate in the direction of its movement, with its foremost piece leading the rest. This is balanced by a thinning effect taking place around the middle of the body in motion. In realistic animation, the apparent volume of a body will remain the same, so when one axis stretches, the other will compress.

Principle-1--Squash-&-Stretch.gif

 

 

2: Anticipation

This principle is exactly what it sounds like. It’s building the pretext for action. Whether that’s someone’s eyes looking in another direction before a scene change, or someone’s arm raising a hammer before striking a nail, its purpose is in building suspense. It could also be a rectangle sliding in and appearing before a block of text, directing the viewers’ attention to where action is about to take place, and is applicable from explainer videos to high-budget films. 

Principle-2--Anticipation.gif 

 

 

3: Staging

This principle can be applied across a variety of visual mediums. It’s setting your scene, your frame or your image in a way that is undoubtedly conveying one message, or one subject with particular importance. This could be a subject taking a large amount of foreground, a high amount of contrast showing the subject in light while the rest is dark, or creative use of camera angle and field of view. In design, this can be thought of as visual hierarchy, and in Illustration; composition.

Principle-3--Staging.gif

 

 

4: Follow Through and Overlapping Action

Follow Through is used to give a sense of realism to an animated element. It can be thought of as drawing a connection to the physical world; in the sense that an object in motion, upon stopping, will transfer some of that energy to its environment or appendages. Say you’re running down the sidewalk, and you force yourself to stop abruptly; your body will carry inertia with it, and your arms, hair and flesh will continue moving after you’ve stopped - only to return towards the center of mass on the rebound. Overlapping action is when you have multiple elements moving at different rates and speeds, which again, mimics the real world as movement is often erratic, yet chaotically rhythmic.

Principle-4--Follow-Through-and-Overlapping-Action-2.gif

 

 

5: Slow In and Slow Out

When an organic body moves (or most anything, really), the movement tends to gradually accelerate until its peak velocity is reached. To come to a full stop, a body experiences a gradual decrease in speed. This is mimicked in animation as well, and can be used or purposely left out for effect, contrast or to direct a viewer’s attention.

Principle-5--Slow-In-and-Slow-Out.gif

 

 

6: Arc

While more directly related to organic animation, this principle is still used in motion graphics depending on the ultimate goal of the project/given design problem. When moving an element between two points, a straight line is obviously the quickest, but also appears the most mechanical. By adjusting the path the motion takes to resemble a curve, it more closely aligns to how objects move in the real world – and elicits a more emotional response form the audience.

Principle-6--Arc.gif

 

 

7: Secondary Action

This technique involves animating secondary and tertiary elements that help to reinforce or support the main animation the audience is meant to fixate upon. For example, hair moving in conjunction with a character’s walking cycle, or a vehicle undulating vertically as it travels horizontally to represent the engine working both communicate their main action, but offer more detail as to the complexities involved in that action.

Principle-7--Secondary-Action.gif

 

 

8: Timing

Timing relates to the treatment of motion throughout a scene or a project. Again, just like in the real world, there’s an underlying consistency in the way things move based on physics and the constraints of the world around us. Therefore, paying special attention to timing between movements is critical; it can be pushed and exaggerated, but consistency should always be sought after.

Principle-8--Timing.gif

 

 

9: Exaggeration

Realism is great and extremely important in grounding your animations in something tangible, but too much realism can make your work appear static and boring. By exaggerating certain aspects of your animation, you can create a much more appealing aesthetic which retains your viewer’s attention, and creates a stronger emotional tie with them and their memory.

Principle-9--Exaggeration-2.gif

 

 

10: Appeal

This is the underlying notion that everything you animate and design should have a solid, easy-to-digest quality to it. It’s engaging, attractive and fun to interact with – whether that interaction be active or passive. There’s no real guidebook on how to do this, but using a combination of solid concept, design acumen, and technical skill will surely get you on your way.

Principle-10--Appeal.gif

 

Motion design is all about excitement, you excite the design, and you excite your audience. I hope this post helps those who are interested in pursuing the art form, as well as those who are just curious about the designers behind the screen – because without all these beautiful things that move, the world would be a much more static place. I just can’t have that. 

 

Stay curious.