Guide to Material Motion in After Effects

A basic sticker sheet and workflow for animating user interfaces

Jonas Naimark
Feb 26, 2019 · 4 min read
Image for post
Image for post

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.

Download it here 👈

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.

Image for post
Image for post
An example of imported Sketch components being dragged into an 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.

Image for post
Image for post
An example of quickly tweaking a component using Master properties

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.

Image for post
Image for post
A collection of UIs created using components customized with Master properties

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.

Image for post
Image for post
Examples of nav transitions using Material motion patterns

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”.

Image for post
Image for post

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.

Google Design

Stories by Googlers on the people, product, and practice of UX at Google

Jonas Naimark

Written by

Motion designer at Google on the Material Design team

Google Design

Stories by Googlers on the people, product, and practice of UX at Google. For editorial content and more visit design.google

Jonas Naimark

Written by

Motion designer at Google on the Material Design team

Google Design

Stories by Googlers on the people, product, and practice of UX at Google. For editorial content and more visit design.google

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store