Hey there,
I’m trying to build a rotational parallax on mouseover. However, I’m experiencing weird flickering when I point the cursor towards each corner of the browser. Is there anyone with an idea how to fix this? Much appreciated.
I used the following tutorial: Rotational parallax on hover - Webflow interactions and animations tutorial - YouTube
Hello @jensvahle
I tried your site in a couple of different browsers and it seems to be working pretty fine. The only time I noticed a little bit of flickering is whenever you go out of the window and go back, other wise if you keep your cursor inside of it that flickering doesn’t happen.
setting overflow to hidden on your “section 1” should fix that.
Thanks for you suggestion, but it’s not fixing it. Still having that flickering. Especially in the top left corner. Any other suggestion? Thanks a lot in advance.
Ah yes, I see it now. You can avoid this by setting your interaction on the parent element (section) rather than the div that you want to rotate.
Basically what happens is that your “while mouse moves over element” works exactly as it should and stops working once you stop hovering the cursor over the div. And since that div rotates its size visually is reduced ever so slightly - interaction stops, element rotates back, cursor again is over a bit expanded element… this goes on forever, hence the jitter.
This did the trick! Thank you!
No problem, just mark as resolved!