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

Motion’s primary job is to help users navigate an app by illustrating the relationship between UI elements. Motion also has the ability to add character to an app with animated icons, logos, and illustrations; however, establishing usability should take priority over adding expressivity. Before flexing your character animation skills, let’s start with designing a strong motion foundation by focusing on navigation transitions.

Transition patterns

When designing a nav transition, simplicity and consistency are key. To achieve this, we’ll choose from two types of motion patterns:

Transitions based on a container 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.