Bringing Designs to Life with Motion Design

Animation has always held a special place in my heart. There was even a time when I dreamed of becoming an animator myself. I was intrigued by the idea of creating worlds and characters with my own hands. Though my aspirations of becoming an animator have subsided, my love for animation never did. Instead, it evolved into a deep appreciation for the art form and its ability to tell stories and convey emotions in ways that no other medium can. When I discovered motion design, a sort of combination of graphic design and animation, it ignited a newfound excitement within me.

My exploration into motion design started during my studies, where I was introduced to the 12 Principles of Animation video by AlanBeckerTutorials. In a clear and concise format, this video breaks down the fundamental principles of animation laid out by Disney animators Frank Thomas and Ollie Johnston. Each principle is accompanied by insightful commentary and demonstrations. These principles not only provide invaluable guidance into the art of creating movement and emotion through animation but also lay a solid foundation for understanding the principles that form the basis for motion design.

Motion Design Principles

Building upon the timeless 12 principles of animation, we turned our attention to the principles specific to motion design. This is where the 10 Principles of Motion Design comes in. JR Canest interpreted and compiled this list based on the 12 principles of animation. Let’s explore how these principles help us create captivating motion graphics and animations.

Timing, Spacing and Rhythm

Timing refers to the speed of an animation, spacing refers to the distance between keyframes, and rhythm establishes the pace and flow of motion. Together, they ensure that animations are smooth and coherent. It also guides the viewer’s attention and creates a sense of tempo and movement.

Eases

This principle refers to the technical side of motion design. “Eases are graphs we use to animate the rates of change for different properties. They’re named as such because when you change two values in After Effects or other animation software, you’re also dictating how you want it to ease out of the first value and into the next value” (VMG Studios). Essentially, they control the acceleration and deceleration of motion, allowing animations to start and end smoothly. When we apply eases, our animations will appear more natural because they mimic the way objects move in the real world. This enhances the overall realism of our motion designs.

Mass and Weight

Mass and weight convey the sense of gravity and physicality in animations. When we accurately portray the mass and weight of objects, our animations feel more believable and grounded. This adds depth and dimension to our motion graphics and animations.

Anticipation

Anticipation prepares the viewer for upcoming actions or changes in an animation. It involves a brief pause or movement in the opposite direction before the main action. “To emphasize a change and show that it requires a large amount of force, add a backwards change first. Showing a change in the opposite direction first can also clue in a viewer on where to look in a frame before the main change happens” (VMG Studios). Overall, this builds anticipation and adds impact to the subsequent movement.

Arcs

Arcs define the path of motion for objects in an animation. In general, they mimic the natural trajectories of movement. When following curved paths, our animations appear more fluid and lifelike. This enhances the visual appeal and adds a sense of realism.

Squash, Stretch and Smears

Squash and stretch deform objects during motion to convey impact, elasticity, and flexibility. Smears are exaggerated shapes used to create the illusion of speed or rapid movement. These techniques help to make our animations more expressive and livelier.

Follow Through and Overlapping Action

Follow through involves elements continuing to move after the main action has stopped. Overlapping action refers to the sequential movement of connected parts. These principles simulate the inertia and momentum of objects by creating more dynamic and believable animations.

Exaggeration

Exaggeration emphasizes certain aspects of an animation to convey a message or evoke a specific emotion. Animations become more expressive and impactful when movements or characteristics are amplified. This also helps capture the viewer’s attention and convey ideas more effectively.

Secondary or Layered Animation

A secondary animation adds depth and complexity to the primary motion, typically featuring subtle movements or reactions that complement the main action. This layered animation elevates the scene by introducing additional elements, which enhances both the visual impact and storytelling aspect of our motion designs.

Appeal

Last but certainly not least, appeal refers to the attractiveness or charm of an animation. This is what draws viewers in and elicits an emotional response. Animations become more engaging and memorable when we focus on character design, personality, and visual aesthetics. This last principle is simple, yet its impact is profound. Regardless of how refined our animations are, it won’t matter if they simply aren’t appealing to look at. In the end, we want to leave a lasting impression on our audience in more ways than one.

Final Thoughts

I hope that this quick overview was enlightening and showed you the power that animation can have as a storytelling tool. Motion design has the ability to engage, inform, and even inspire viewers like never before. Whether it's a logo animation that captures the essence of a brand or a motion graphic that simplifies complex information, motion and animation have the potential to elevate any project to new heights.