Motion shows how an app is organized and what it can do.
Motion provides:
The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other.
Material in motion has the following characteristics:
Material is full of energy. It quickly responds to user input precisely where the user triggers it.
Larger animations on mobile devices are 300-400ms long. Smaller animations can be as short as 150-200ms. Animations longer or shorter than these can feel sluggish or difficult to follow.
See more in Common Durations.
Ink ripples confirm user input by immediately expanding outward from the point of touch. The card lifts to indicate an active state.
See more in Radial reaction.
Show the connection between new surfaces and the element or action that creates them.
See more in Creation.
Material depicts natural movement inspired by forces in the real world.
In the real world, an element’s ability to speed up or slow down quickly is affected by weight and surface friction. In a similar way, starts and stops do not occur instantaneously in material design.
See more in Natural easing curves.
Real-world forces, like gravity, inspire an element’s movement along an arc rather than in a straight line.
See more in Movement.
Material transformations follow an arc of movement.
See more in Transforming material.
Material is aware of its surroundings, including the user and other material around it. It can be attracted to elements and respond appropriately to user intent.
See more in Choreography.
As elements transition into view, they and their surroundings are choreographed in a way that defines their relationships.
Material can push other material out of the way.
Elements may attract other elements and join with them as they approach one another.
Material in motion guides focus to the right spot at the right time.
See more in Continuity.
A transition helps guide the user to the next step of an interaction.
Movement can communicate different signals, such as whether an action is unavailable.
Animation can bring focus to elements that need user attention.
Successful motion design possesses the following characteristics:
An interaction shouldn't keep the user waiting longer than necessary.
Do.
Animate quickly so that the user never has to wait for the animation to finish.
Don’t.
Staggering and slowing the movement of many elements can lengthen the duration.
Transitions should be clear, simple, and coherent. They should avoid doing too much at once.
Do.
Maintain a clear path into the next view, even while elements are choreographed as a group.
Don’t.
Transitions can get confusing when multiple items need to move in different directions or cross paths.
Material elements are unified by their speed, responsiveness, and intention. Any customizations to your app's motion experience should be consistent throughout the app.
While these apps have different functions, their similar animation experiences make them feel related.
The benefits of these motion patterns are observable in the following two examples, in which an app that follows these patterns is compared with an app that does not.
Do.
During the transition, the user is guided to the next view. The surface transforms to communicate hierarchy. Loading occurs behind the scenes to reduce perceived latency.
Don’t.
It is unclear how the new view is related to the old because no transition occurs and there isn’t a clear focal point. Any sense of hierarchy isn’t communicated, and loading is more apparent by the display of a circular spinner.
