Feedback animation
Feedback animation is used to confirm a user interaction with an interactive element.
Examples
Guidelines
When to use
- State change transitions for interactive elements, such as hover, focus, and active.
- To confirm a user interaction, including positive or negative feedback.
Behavior
State change transitions
Interactive elements typically have four states: rest, hover, focus, and active. A component's appearance often changes between states as a response to interaction.
When the appearance changes, animate the transition between states using the following combinations.
| State | Example | Duration | Easing |
|---|---|---|---|
hover | 200m | $gl-easing-out-cubic | |
focus | 200ms | $gl-easing-out-cubic | |
active | 500ms | $gl-easing-out-cubic |
| Do | Don't |
|---|---|
Mimic the animation timing of real-world objects. Focus ring animates in 200ms. | Avoid both instant and slow animations. The instant animation in the first example makes the interface feel less lively. The slow animation in the second example makes the interface feel sluggish. |
Use cubic-bezier easing for focus feedback to make the animation appear more natural. The input focus ring accelerates quickly and slows as it stops. | Avoid using linear or other default easing functions for focus feedback animations. The first example uses linear easing for the focus ring. The second example uses default easing. These transitions make the focus ring feel less lively. |
List components state change
Components like navigation, tables, or those that contain a list of options have many interactive elements in close proximity. To prevent perceptions of slow performance, feedback should be fast.
| State | Example | Duration | Easing |
|---|---|---|---|
hover | 100m | $gl-easing-out-cubic | |
focus | 100ms | $gl-easing-out-cubic |
Loading feedback
Set the button to the loading state following a user action, if the result of the action occurs on the same page without a reload.
Positive and negative feedback
Accessibility
A component should change state instantly when prefers-reduced-motion is enabled unless it's essential for the workflow. Instantly changing state doesn't mean no animation. It should be invisible for users, but visible for the browser because some JavaScript actions rely on UI animation, so animation should last 0.01ms.
@media (prefers-reduced-motion: reduce) {
.element {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
Resources
- A guide to designing accessible, WCAG-conformant focus indicators - Sara Soueidan
- Focus! - A11y-101
Last updated at: