Feb 20, 2020
Implementing Motion
An introduction to Material Design’s new motion system and transition patterns
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:
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.
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.
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.
