Hover Animations Work Incorrectly When Switching Hovers Too Quickly

Design help Animations & Interactions
1

Hello!

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:
https://preview.webflow.com/preview/digitalwarriors?utm_medium=preview_link&utm_source=designer&utm_content=digitalwarriors&preview=55bd0590933b5a0ad41f44aa00af759b&pageId=609a3cd8e04df5fabdcd4d42&mode=preview

Thank you for your time! I really appreciate it.