Streaming live at 10am (PST)

Hover Animations Work Incorrectly When Switching Hovers Too Quickly


I am trying to do a hover interaction that, when hovering on 1 icon out of 3 icons:

  1. The other non-hovered icons will fade to a lower opacity;
  2. The background will change;
  3. A button to proceed will appear.

I managed to make this interaction work in circumstances where both HOVER-IN and HOVER-OUT animations can complete successfully without interruption. (shown in the first part of the video attached)

However, when the cursor goes from 1 icon to another without triggering HOVER-OUT, the animation glitches, and icons are highlighted incorrectly.

Here is a video demonstration of what I mean:

Here is my public share link:

Thank you for your time! I really appreciate it.