Glitched Hover Animation

Some times when you hover on the Light Bulbs in the hero, thecursor glitches between the selector & the pointer.

Read Only Link: https://preview.webflow.com/preview/accela?utm_medium=preview_link&utm_source=designer&utm_content=accela&preview=ed0664c4712820e20baccf18090db48a&workflow=preview

Live Link: https://accela.webflow.io/


Here is my public share link: LINK
(how to access public share link)

Hi @ConfusedMan34, thanks for your post.

The interaction triggers are spaced close to each other so if one interaction triggers while another is running, the transition will be interrupted, I would recommend to add a .5 delay to the opacity change on the first hover over step:

Shared with CloudApp

I tested this and it seemed to help, I would try that next.

Hello @cyberdave

Thanks for the response!
I understand what you’re saying and tried adding a .5 delay to the final step of all the animations but it doesn’t seem to make much of a difference. I’ve published the changes & this is the read only link: https://preview.webflow.com/preview/accela?utm_medium=preview_link&utm_source=designer&utm_content=accela&preview=ed0664c4712820e20baccf18090db48a&workflow=preview

Hi @ConfusedMan34, thanks, I think this may be happening due to the way the interactions are setup where you are having separate interactions for different elements and maybe there is some setting in one of those 5 interactions which are affecting.

I would actually change the interactions setup a bit so that you will only need a single interaction for hover in and hover out, it makes things a lot simpler but a few changes will be needed.

I have made a video to help show how to change the interactions to hopefully work as you are expecting:

I hope this helps!