Start hover out animation after hover in finishes

[Alexander_Z]

I’ve been toying with a reveal on hover animation.

It does what it’s supposed to do for the most part. It reveals on hover in and then slides back out on hover out.

My issue is that if you hover out in the middle of the hover in animation the animation pauses and then plays the hover out animation. I want the hover in animation to finish before the hover out animation plays even if the mouse hovers out. I’ve tried all sorts of things including delays but I just can’t figure it out.

Any help would be appreciated,
Thanks.

[AliSaeed]

Hi there,

Please share the read-only link so we can help out

[Alexander_Z]

Sorry about that.
https://preview.webflow.com/preview/atx-watches?utm_medium=preview_link&utm_source=designer&utm_content=atx-watches&preview=07b13de9e818dd01f8694c118b29f037&workflow=preview

The interaction is in the “Repair Services” section. It is applied to the “service wrapper” class.

[AliSaeed]

I see what you mean. Delays just pauses the interactions where ever it is. So no use using that. But do you really need it complete the interaction and stay for a while? You can have a smoothing flowing interaction. Much better for UX.

I tried playing with the values in the interactions. I set the initial value to 20rem and 0 rem for when the text covers the image. This way, you get the title below the image like so.

Hope this helped