Hello! Please see the attached codepen...
I have 2 different blur animations, one of which is more drastic than the other.
I have 3 elements that, on mouseenter, blur the other 2 elements with 1 of the 2 blur animations, and on mouseout, reverse those animations.
Everything works perfectly if you hover over one element and then hover away onto empty space.
However, if you instead quickly move your mouse between the three elements (without moving your mouse to empty space) you'll quickly see that the animations mess up and you can get into a state where your mouse is hovering over a blurred element (which it never should) or one of the non-hovered elements isn't blurred (which always should be).
I've been debugging this and I can (pretty) confidently say that:
- if I only used 1 blur animation instead of 2, everything would work perfectly
- if I replaced 1 of the blur animations with some other animation (like opacity), everything would work perfectly
- using gsap.killTweensOf() does not fix the issue
Any ideas on whats going on? Thanks in advance for your time and help!