Material in motion guides the user’s focus through interactions by sharing elements across transitions.
Stagger the choreography of new surfaces being created.
Connect user input to surface reactions with touch ripples.
Maintain a clear focal point during transitions by carefully selecting the number and type of elements shared across the transitions.
While a surface is expanding, a significant number of elements should remain visible during the transition.
Complex transitions should keep a single element visible (see below).
All elements from this collapsed card form the header of the expanded card.
While expanding a surface, if only a single element will be present after the transition, that element should be the focal point of the transition, controlling all other elements.
Anchoring non-shared content to a single shared element’s movement.
If there are no shared elements between views, anchor all crossfading elements to the surface’s vertical movement. The surface crops the content within.
Anchoring all non-shared content to the vertical movement of the surface expansion.
If there are no common surfaces shared across the transition, a new surface enters the screen from another location, creating a new focal point.
When multiple elements remain visible during a transition, only the most important ones should be included. Some elements may disappear during the transition but reappear once the transition completes, if they are too distracting during the transition itself.
Do.
Guide the user’s focus to the next view using the most important shared element.
Don’t.
Avoid creating scenes without focus, such as by using many shared elements or by letting elements cross paths during the transition.
When any element doesn't completely load by the time a transition completes, allow sufficient space in the location where the element will appear. This prevents jarring layout shifts when the elements finally appear, and avoids user frustration when a touch target suddenly jumps away.
Do.
Make room for the unloaded elements during the transition and gracefully display them in place once they fully load.
Don’t.
Don’t shift the layout as elements load into view, as this distracts and causes a shift in focus.
New material surfaces, and their content, may be created from nothing.
Associate newly created surfaces to the element or action that creates them. New surfaces usually emerge from radial or rectangular expansions from the point of touch.
Do.
This menu appears from the touch point, tying the element to the point of touch.
Don’t.
This menu appears far away from the touch point that triggered it, which breaks its relationship with the input method.
When multiple new surfaces are created at the same time, quickly stagger the appearance of each. Create a clear, smooth focal path in a single direction.
Do.
List items have a slightly staggered entrance. Grid items populate left to right, and top to bottom.
Don’t.
Items shouldn’t appear within the list all at once. It’s overwhelming and eliminates a clear focus.
Don’t.
Items that have a slightly staggered entrance shouldn’t appear in an order that’s confusing to follow.
Don’t.
Do not wait for each item to fully animate before introducing the next item. Begin each item’s staggered entrance no more than 20ms apart.
Surfaces created without user input, or without a point of origin, should do so using an elegant combination of fading, position, and scaling transformations.
Do.
An automatically triggered surface appears smoothly and quickly.
Don’t.
Too much animation during surface creation is distracting.
Clarify the connection between user input and surface reactions using radial action.
Connect user input to screen reactions by using touch ripples to both indicate the point of touch, and to confirm that touch input was received. For touch or mouse, this occurs at the point of contact.
Screen reactions occurring near the point of touch should occur sooner than reactions further away.
Use touch ripples to connect screen reactions to the point of touch.
Starting from the point of touch, the app bar changes color with the new color rippling outwards.
Images in this grid fade out based on the radial reaction around the tap point.