Streaming live at 10am (PST)

Hover Animation Interaction Issues on Menu Buttons

Hey all.

I created a hover animation on my menu buttons and it’s acting a bit clunky / not as its supposed to and would love some help, please!

I created three slow scrolling marquee rows on the homepage of my website and these rows each represent a different menu option (projects, info, and contact).

This is what’s supposed to happen:

Action #1: User hovers over Row #1
Animation: Row #1 grows and Rows #2 and Row #3 shrink, blur, and lose opacity.

Action #2: User removes cursor from Row #1
Animation: Everything goes back to normal for all three rows.

My issue:
It appears if the mouse cursor switches between each of the rows too quickly, the animation gets messed up. For instance, I quickly moved my cursor from Row #1 to Row #2 and only 1 of the rows shrunk and got blurry—the other two stayed the same.

My objective/goal:
I want my animation to flow seamlessly between each hover effect on each row. Hovered rows should grow in size and non-hovered rows should shrink, lose opacity, and slightly blur. And then all actions should go back to normal when removing the hover. But right now there seems to be an issue when jumping too quickly from one row to another with the mouse cursor and I’d love to patch that up so that it works flawlessly all the time. I have no clue what to do, though! lol. I’m thinking maybe part of it has something to do with the fact that my font/letters appear to not be aligned center with their container boxes and are at the upper end and poking out (I also don’t know how to fix this. lol).

Please help!
Thank you in advance.


Here is my public share link: Webflow - Portfolio