Guide to Material Motion in After Effects
A basic sticker sheet and workflow for animating user interfaces
I’ve already shared why Motion Design Doesn’t Have to be Hard, but I wanted to make it even easier for designers to use the Material motion principles I know and love. After Effects is the primary tool our team uses to create motion examples for the Material guidelines. Having used it to animate my fair share of UIs, I wanted to share my workflow tips and…
My After Effects sticker sheet
Download this basic sticker sheet to see a project completed using my streamlined workflow (outlined below). It contains a collection of Material components, baseline UIs, and navigation transitions.
Available under Apache 2.0. By downloading this file, you agree to the Google Terms of Service. The Google Privacy Policy describes how data is handled in this service.
Importing assets into AE
First things first, we need assets to animate. Most of the visual designers on our team use Sketch, which by default doesn’t interface with AE. Thankfully Adam Plouff has created this plugin that adds this functionality. I used it to import our library of baseline Material components from Sketch into AE. These assets are found in the sticker sheet’s Components folder.
Creating UIs
With this library of baseline components, new UIs can quickly be assembled by dragging them into a new AE comp.
Customizing components
These baseline components are a great start—now they need to be customized to create a wide range of UIs. This is where Master properties in AE shines. This often overlooked feature makes it possible to create a single reusable asset that can be quickly tweaked without duplicating the original. It’s similar to how overrides work with symbols in Sketch. For example, the app bar is often customized by changing its icons, colors and shadows. With that in mind, I added those three items as Master properties for the component.
By adding Master properties to each component, I could quickly create a collection of UIs to animate. You can find these in the Baseline UIs folder in the download.
Animating transitions
Now that we’ve established a workflow for creating UIs, it’s time to animate. The examples in the Navigation transitions folder illustrate a method for applying Material motion patterns in After Effects. If you’re interested to learn more about these patterns, be sure to read my previous article.
To start, each property is animated without easing. The parent composition is then time remapped to apply easing and set duration for all the nested keyframes. This allows for quick adjustments to easing and duration since only two time remapped keyframes control the entire transition. It’s also a simple method for applying one overarching easing curve to all animated elements. Persistent elements animate with the entire easing curve. Outgoing elements exit as as the curve speeds up and incoming elements enter as it slows down. Read more here under “Complex choreography”.
This method can be used to consistently animate most transitions that use Material motion principles. It may start to break down with more complex flows or highly stylized transitions, but those tend to be less common.
After Effects is such a flexible tool, it’s hard to claim any single workflow as being correct. Every designer will have unique and valid approaches to animation challenges. My hope is that these tips will spark some ideas and help you be a more efficient motion designer.
