Through animation, user interactions and screens come to life, providing users with guidance and direction as they navigate complex experiences.
Easing
We use an 'expressive' style of easing which gives a sense of movement with a touch of personality. It appears more natural and less mechanical.
Strictly linear movement appears unnatural to the human eye. Elements on the screen should speed up quickly and slow down smoothly, obeying the physics of a light-weight material. We can use one of these three types of easing.
Type
Usage
Value
Standard easing
Use standard-easing when an element is visible from the beginning to the end of a motion. Expanding tiles and the sorting of table rows are good examples.
cubic-bezier(0.4, 0.14, 0.3, 1)
Entrance easing
With this style, an element quickly appears and slows down to a stop. Use entrance-ease when adding elements to the view, such as a modal or toaster appearing. Elements moving in response to the user's input, such as a dropdown opening or toggle switching should also use this style.
cubic-bezier(0, 0, 0.3, 1)
Exit easing
Use exit-easing when removing elements from view, such as closing a modal or toaster. The element speeds up as it exits from view, implying that its departure from the screen is permanent.
cubic-bezier(0.4, 0.14, 1, 1)
Duration
Duration is calculated based on the style and size of the motion.
Variable
Usage
Value
$motion-e-fast
Micro-interactions such as button and toggle.
- Toggle switch
- Buttons
110ms
$motion-e-mod
Expansion, system communication.
- Show more/show less
- Notifications and toasters
240ms
$motion-e-slow
Large expansion and area.
- Preview panels
- Modals
- Sliders
400ms
$motion-e-[custom]
Depends on context. Situations that are not critical to displaying content quickly or for ornamentation.
- Progress bar
[custom]