Feedback animation

Feedback animation is used to confirm a user interaction with an interactive element.


Add examples from gitlab-ui Create an issue


When to use

  1. State change transitions for interactive elements, such as hover, focus, and active.
  2. To confirm a user interaction, including positive or negative feedback.


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.


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.


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.

Loading button
Loading story...

Positive and negative feedback

Add positive and negative feedback Create an issue


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;


Last updated at: