Overlay does not read easing first hover

Hi !

I have created an overlay on the third section of my homepage and created the interaction on the parent div .up so that the children div moves up and appear.

I created an easing so the animation is not abrupt. BUT the first time you hover on the div the overlay comes up abruptly while the second time respond to the right interaction indications.

I know is the browser which does not read well the interaction and that I have to “force” it but I have no Idea how to do that.

Could someone explain me precisily what I have to do ?

THANK YOU for your help


Here is my site Read-Only:

(Webflow - Okev's Stupendous Site)

https://okevs-stupendous-site.webflow.io/okevs-website/home

Hi, try keeping vertical movement on both hover and hover out animations to the same amount, like initial state its 8000px and on hover out its 500px I changed these to 500px and it seem to solve the issue for me.

Also I feel there are better ways to do this animation, you can try youtube tutorials.

1 Like

That’s awesome. thank you very much !! Why you think this way is not that good?

In fact I have another bug on the same animation. On the the .up parent div I put a text inside in flex center which I want to make dissapear on hover. But the intial on the publised site that flex center and bottom does not work. Do you know what it could be ? I really thank you anyway

never mind I found out why. I think I just need some rest !!ahahahah

No problem!

Why you think this way is not that good?
Because I feel there is too much going on in your animations, the same effect can be done with less code like in screenshots below


Glad you solved the problem :slight_smile: Ah! and yes rest is super important but I am sending another problem your way when you get back from a break haha , the problem is when you hover over the up container slighly rom any side then it won’t trigger the animation untill you move your curse further inward and also once the hidden div is revealed and then when you try to move your cursor over divvo then the hover out animation triggers which shouldn’t right? It should stay stable so people can copy text or click on find out easily.

1 Like

Yes you’re absolutly right. Even if, on my pc when my cursor is on the block, the overlay seems stable. Which solution would you suggest ?? and i m glad u highlight another problem so we can find a solution !!! :wink:

1 Like

on my pc when my cursor is on the block, the overlay seems stable.

My bad I think there was a problem in webflow designer because when I view it on your live site it is stable and hover works fine too.

1 Like

awesome ! one problem less :wink:

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.