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: