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.
All content elements are shared
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).
Few or no content elements are shared
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.
If there are no shared elements between views, anchor all crossfading elements to the surface’s vertical movement. The surface crops the content within.
No shared surfaces (Not recommended)
If there are no common surfaces shared across the transition, a new surface enters the screen from another location, creating a new focal point.
Multiple shared elements
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.
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.
New material surfaces, and their content, may be created from nothing.
Creating new surfaces
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.
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.
Autonomous surface creation
Surfaces created without user input, or without a point of origin, should do so using an elegant combination of fading, position, and scaling transformations.
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.