January 18, 2019 / Matt Rodenbeck
Our 10 Principles
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 we can create and animate quickly. It’s important Motion Designers and Animators alike stay true to their roots, the way we do this is by referencing the 12 principles of animation.
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. 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 it:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.