The Art and Science of Designing With Motion

A crash course for motion design beginners

Stephanie Embry
Modus
Published in
5 min readAug 16, 2019

--

Illustration: thirteen23

OOne year ago, I knew next to nothing about building motion. It didn’t help that the prospect sounded scary — motion means animating, right? And animating means I have to—what—design across time? I just mastered organizing my Sketch symbols, but okay.

After several months of diving headfirst into After Effects (it’s the industry standard for motion graphics), I’m glad to say I’ve learned the ropes of both After Effects and motion design in general. If you’re new to motion design or are looking to add it as another skill in your designer tool belt, these tips can help you master it a little faster.

First, think like an engineer

The science: Learning how to physically build motion

The first step to learning how to build motion is to learn how to speak the language. Some of the technical aspects (and the overwhelmingly dense After Effects interface) became less scary after I familiarized myself with a few key concepts.

Easing is the acceleration or deceleration of motion between two key points. “Ease out” refers to motion that decelerates as it reaches its end value and is a common form of easing in UI motion (just ask Google).

Showing an easing curve next to its visible motion (Source: Google Material)

Interpolation is the calculation of values in between starting and ending values. Easing curves affect the interpolation of two key frames.

Each of these examples have the same starting and ending values, but because their interpolation is different, the motion between those points differs. (Source: Jeffrey Chou)

Key frames are specific values in time. Key frames are what you create and manipulate in most animation programs. They mark the initial, in-between, and ending states of an object.

See those dots at the bottom? Key frame markers! Each of those key frames marks a point in time where the object has a specific set of values. (Source: Nicolas Roard)

Duration is the length of an event from start to finish. In web and app development…

--

--