Interaction is a combination of functionality, intention and connection and are conveyed through the use of motion.
Utilize these fundamental principles, illustrations, and tokens to develop coherent and realistic animations to bring a nice user experience and to help inform our users. The principles and guidelines of motion stated here are highly dependent on its purpose and application. These principles will be more obvious in some cases and may vary in other scenarios, but should be used as best as possible in order to ensure consistency.
The duration required for an action to occur is known as timing. It is crucial to consider timing carefully in all animation scenarios.
Spacing refers to the gap between two frames of a moving object. Utilizing varied spacing is essential to achieve smooth transitions.
Ease is affected by both timing and spacing, playing a significant role in how actions flow. Objects should smoothly accelerate and decelerate during movements.
The selection of a easing type depends on how a transition moves in relation to the screen. A rule of thumb regarding the combination of distance and duration in order to mimic real-world physics is:
The speed at which objects move during an animation is determined by the easing. We have 4 predefinde easings that we use first. Each example runs live; pick the duration it runs with.
| Example | Description |
|---|
** Use these tokens in accordance with the principles shown earlier. With reduced motion turned on in your system, the demos stay still.
All four easings, same distance, same duration. Watch where each one is fast and where it brakes.
Distances are broken down into three distance levels. Each distance level uses a set of interval timings on our duration scale.
| Distance | Description | Token |
|---|
Hover the grey track (or focus it with Tab) to roll the ball. The track is as long as the distance it stands for: 25%, 50% and 100% of the description width. Move the mouse out and the ball rolls back.
Fades serve as a sophisticated method for transitioning between colors and/or levels of opacity.
| Fades | Description | Example | Token |
|---|
** Use these tokens in accordance with the principles shown earlier. When applying duration for vertical distances any of the durations that seem fit may apply.
| Value | Name | Example | Token |
|---|
Copy the custom properties, then combine one easing with one duration.
/* Drawer slides in */
.drawer { transition: transform var(--duration-medium-3) var(--ease-decelerate-emphasized); }
/* Button hover */
.btn { transition: background-color var(--duration-fast-4) var(--ease-standard); }
/* Element leaves the screen */
.toast--exit { transition: opacity var(--duration-fast-3) var(--ease-accelerate-generic); }
decelerate-emphasized to bring things on screen (drawers, menus, notifications).standard for hover states.accelerate-generic when an element leaves.accelerate-generic for an element that enters.prefers-reduced-motion.