Overview
Motion is best used to bring focus and guide the users attention, so they have an easier time navigating our website. Used sparingly and with maximum impact in mind, we can also delight the user in essential steps of his journey, with motion.
Principles
Use it sparingly. Motion should always have a clear purpose when used.
Keep performance and speed in mind. Never block the users speed of action with a animation he has to wait for. Animation should not be in the way of the user.
Communicate the brand. Motion always also communicates our brand, so whenever used keep it consistent with our general brand messaging.
Timing Function
These tokens control the velocity of the motion. It helps control the feeling of the animation.
| Token | Value | Description |
|---|---|---|
| ease-in-out | cubic-bezier(0.4, 0, 0.2, 1); | Our default timing function and fits to most use cases. The motion initially accelerates and then decelerates. |
| ease-in | cubic-bezier(0.4, 0, 1, 1); | The motion accelerates the further it progresses. Works well for objects sliding out of the viewport. |
| ease-out | cubic-bezier(0, 0, 0.2, 1); | The motion decelerates the further it progresses. Works well for objects sliding into the viewport. |
Visualization
Duration
Use these tokens to control the length of the animation. When choosing one take our principles and the context of the motion into consideration.
| Token | Value | Description |
|---|---|---|
| duration-slow | 400ms | Best used for large screen changes or far distances that objects travel. Example: Screen overlay of Modal. |
| duration-medium | 250ms | Our default transition duration for changes to an elements position or properties that are larger than small changes. |
| duration-fast | 150ms | The fastest duration is best suited for small changes like color or opacity changes on hover or action of elements. |