Motion Design Doesn’t Have to be Hard

In areas most important to a UI, motion design can and should be simple

Jonas Naimark
Sep 26, 2018 · 6 min read

Motion helps make UIs expressive and easy to use. Despite having so much potential, motion is perhaps the least understood of all the design disciplines. This may be due to it being one of the newer members of the UI design family. Visual and interaction design dates back to early GUIs, but motion had to wait for modern hardware to render animation smoothly. The overlap between UI motion and traditional animation also muddies the waters. A lifetime can be spent mastering Disney’s 12 basic principles, does this mean UI motion is similarly complex? People often tell me that designing motion is complicated, or that choosing the right values is ambiguous. I contend that in areas most important to a UI, motion design can and should be simple.

Where to start

Transition patterns

  1. Transitions based on a container
  2. Transitions without a container.

Transitions based on a container

Elements like text, icons and images are grouped inside containers

If a composition involves a container like a button, card or list, then the transition design is based on animating the container. Containers are usually easy to spot based on their visible edges, but remember they can also be invisible until the transition starts, like a list item with no dividers. This pattern breaks down into three steps:

1. Animate the container using Material’s standard easing (meaning it speeds up quickly and then gently slows to rest). In this example, the container’s dimensions and corner radii animate from a circular button to a rectangle that fills the screen.

2. Scale elements in the container to fit to width. Elements are pinned to the top and masked inside the container. This creates a clear connection between the container and the elements inside.

*Animation slowed down to illustrate how elements are scaled and masked inside a container

3. Elements that exit during the transition fade out as the container accelerates. Elements that enter fade in as the container decelerates. A seamless sleight of hand effect is achieved by fading elements as they move quickly.

*Animation slowed down to illustrate how elements exit and enter using fades

Applying this pattern to all transitions involving a container establishes a consistent style. It also makes the relationship between the start and end compositions clear since they’re linked by the animated container. To show the flexibility of this pattern, here it is applied to five different compositions:

*Animation slowed down to illustrate how the start and end compositions are linked by the container

Some containers simply slide in from off screen using Material’s standard easing. The direction it slides from is informed by the location of the component it’s associated with. For example, tapping a nav drawer icon in the top left will slide the container in from the left.

If a container enters from within the screen bounds, it fades in and scales up. Instead of animating from 0% scale, it starts at 95% to avoid drawing excessive attention to the transition. The scale animation uses Material’s deceleration easing, meaning it starts at peak velocity and gently slows to rest. To exit, the container simply fades out without scaling. Exit animations are designed to be subtler than entrances to focus attention on new content.

*Animation slowed down to illustrate how containers can enter with a fade and scale animation

Transitions without a container

  1. The start composition exits by fading out, then the end composition enters by fading in.
  2. As the end composition fades in, it also subtly scales up using Material’s deceleration easing. Again, scale is only applied to the entering composition to emphasize new content over old.
*Animation slowed down to illustrate how transitions without a container use fading and scaling

If the start and end compositions have a clear spatial or sequential relationship, shared motion can be used to reinforce it. When navigating a stepper component for example, the start and end compositions share a vertical sliding motion as they fade. This reinforces their vertical layout. When tapping the next button in an onboarding flow, the compositions share a horizontal sliding motion. Moving left to right reinforces the notion of progressing in a sequence. Shared motion uses Material’s standard easing.

*Animation slowed down to illustrate vertical and horizontal shared motion

Best practices

Keep it simple

*Animation slowed down to show different motion styles

Choose the right duration and easing

Easing describes the rate that animations speed up and slow down. Most nav transitions use Material’s standard easing, which is an asymmetrical easing type. This means elements quickly speed up and then gently slow down to focus attention on the end of the transition. This type of easing gives animations a natural quality, since objects in the real world don’t instantly start or stop moving. If a transition appears stiff or robotic, it’s likely symmetrical or linear easing has been mistakenly chosen.

*Animation slowed down to illustrate different easing types

The patterns and best practices outlined in this article are meant to establish a practical and subtle motion style. This is suitable for most apps, however some brands may call for more intense expressions of style. To learn more about stylizing motion, read our customization guidelines here.

Once nav transitions are taken care of, the challenge of adding character to your app begins. This is where simple patterns are inadequate and the craft of animation truly shines.

Character animation can add levity to a frustrating error

If you’re interested to learn more about the potential of motion, be sure to read our Material motion guidelines.

Google Design

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