Implementing Motion

An introduction to Material Design’s new motion system and transition patterns

Jonas Naimark
Feb 20 · 3 min read
Image for post
Image for post

When I claimed that motion design doesn’t have to be hard I figured it would raise some eyebrows. Sneaking the word “design” into the title was my way of sidestepping the elephant in the room: implementing motion sure is hard. After all, what good are slick designs if they can’t feasibly be implemented?

Material Design was inspired by the metaphor of “smart paper” — a collection of surfaces that can adapt to guide users through an experience. We’ve delivered on part of that metaphor with an elevation system that accurately renders light and shadows. But coordinating those surfaces with motion (in a smart and elegant way) has been a tougher challenge. That’s why the Material team is excited to share a new project that makes it easy to implement motion.

The Material motion system

We’ve just published new design guidelines and developer documentation (including code for Android and Flutter) for the most important type of motion apps need: UI transitions.

A strong motion foundation starts with well implemented transitions — a fundamental aspect of usability. There are four transition patterns that handle the animation between components and fullscreen views: Container transform, Shared axis, Fade through, and Fade.

Here are examples of the types of transitions you’ll be able to implement:

Examples of transitions you can achieve with the Material motion system

The motion system also provides customization options, making it possible to stylize a transition. You can adjust a transition’s duration, easing, and motion path to express the style of your app. For a simple and functional style, you can use short durations, standard easing, and linear motion paths. For a more dramatic and emphasized style, you can use longer durations, emphasized easing, and arc motion.

Left: Simple and functional Right: Dramatic and emphasized

Transitions are a great starting point for theming your app with motion. Read more in our customization guidelines.

Collaborating on motion

Part of what makes motion hard to implement is that there aren’t many tools to help designers collaborate with engineers. We’ve all been there: waving our hands while making swooshing noises trying to explain a motion idea. Speccing motion is tricky, which is a shame since it’s necessary for bridging the gap between design and implementation. This is another challenging aspect of motion the Material team wants to make easier.

Our updated motion guidelines present specs in an interactive timeline format. They include all the basic information needed to understand and build an animation.

A demo of a motion spec created in Direct

They’re authored in a web app called Direct, which was created by a motion designer at Google, John Schlemmer. It has become a common method for speccing motion internally at Google. We’re excited to now share these motion specs publicly in our guidelines to help explain all the details of a motion design. If you want to create and host your own motion specs using Direct, you can get the open-source code on GitHub.

Just the start

As you may have noticed, this content is tagged as beta. The team wanted to release this early to make sure we’re taking the right technical and design approach before pursuing more features. There are so many directions to take this work, be sure to share your feedback by reaching out to us on Twitter @materialdesign. We’re hopeful this is just the start in our mission to make motion easy to implement.

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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