Beautiful, subtle animation throughout our platform builds a visual sense of connection between people and content onscreen. When used appropriately, animation can convey status, provide feedback, and help users visualize the results of their actions.
Will an animation contribute to the overall clarity of the action? If so, what simple effect will enhance this interaction?
Is the animation a disruption? Does this disruption hinder or help the user’s ability to easily complete the action?
Contextually, does the animation add delight and not cause user discomfort?
A state change indicates that an object has changed state due to user interaction.
Used to hide and reveal extra information.
Used to draw attention to specific information or animation.
Why this works...
The animation gives clarity that information is loading into the area.
The motion is subtle and isn't visually distruptive.
The animation displays for the short time it takes to load the information when otherwise the space would appear empty.
Things moving in the physical world don’t start or stop immediately, they speed up or slow down over time. In web animation we call this behavior easing. Motion that speeds up is said to be easing in and slowing down is easing out. The exact curve to use will depend on the situation and components being animated. There are an infinite number of variations available but you should start with one of these defaults.
| Easing | Curve | Cubic-Bezier |
|---|---|---|
| Ease in |  |
(.89, .03, .68, .22) |
| Ease out |  |
(.16, .84, .44, 1) |
| Ease both |  |
(.42, .0, .58, 1) |
With all animations we need to ensure that our users that prefer reduced motion in their browsers are accounted for. This is done by adding a simple media query that resets animations transitions and scroll behavior. The duration is set to a very short and the end result of the animation will be shown to all users, regardless of motion preferences.
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}