Hello developers, I need some help regarding mouse move over element effect, I have used this effect and when I move my mouse on the edges of the element it flickers. I have no idea why this happens, any ideas?
Hover over the team section;
My read only link: Webflow - Reeya's Beautiful Site
The flicker seems to be coming from when you have the card rotating (along the z/y axis? the 3d effect type thing) as in the edges it pushed down, which then takes the mouse off the element to reset it, it resets then the mouse is on the element and so on and so on and so on. When you hover your mouse on the edge of the card.
To get around this I would recommend reducing the amount of rotation you have in the hover over animation, and maybe add some more smoothing to it, this will make it a much small space where the cursor can sit in that “grey zone”. Does this hopefully make sense?!
Hi, thanks for responding, I tried reducing the amount of rotation and also smoothened it a bit more but still the flicker continues, when I move my mouse a bit out of the edge, flickering starts. Can you point me to precise which div you’re talking about? Also, for me reducing the rotation, the effect/animation won’t look good the way I want it to be*. Any more views on this?
Reference: About Broworks - Inside our force field
*Here the values they have used for rotation the degrees I.e. -20 and the effect is applied on yellow-card. I have also used the same values & applied it here.
Ah you’ll see in the reference link, that the animation if tied to a seperate element, that doesn’t move, e.g a parent div. This means they don’t have that “grey zone” and its a clear, animation applied or not.
I would highly recommend something like that! Having a static div that the animation is tied to (that animation trigger) then having the rotating card (the animated element) be seperate to the trigger.
Does that make sense?
Yes, this does make sense, I redesigned my layout and adjusted the height of the overlay such that there is no “grey zone”. Hence, there is no flickering. Thanks for you response. It was a great help in my learning process.