The Art and Science of Designing With Motion
A crash course for motion design beginners
--
One 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).
Interpolation is the calculation of values in between starting and ending values. Easing curves affect the interpolation of two key frames.
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.
Duration is the length of an event from start to finish. In web and app development…
