GSAP set pause when unhover

[DanielLav 1 Likes (Newbie)]

Hello GSAP community! I'm learning about GSAP and came across a simple problem in my study project.

 

I made an effect in which when hovering over an element, it gets scale: 1.1, and the rest get opacity: .4 and scale: .8

 

But I want to make it so that when the cursor leaves the element that was hovered over, there is a delay during which if the person has time to hover over another, there will be no return to the properties:

gsap.to(othersItem, {
	scale: 1,
	opacity: 1,
	clearProps: "scale"
})

 

If you now try to move the cursor from the active element to any other element with opacity, you will encounter the fact that at the moment when the cursor is not on the active element there will be a slight "twitch" of all elements. This is due to the fact that the mouseleave property is triggered.

 

I hope I explained my problem clearly. If you have any questions I will be happy to answer them.

And I will be very glad if you help me. I'm sure I'm on the right track

 

I also attach my codepen with this problem here:

See the Pen OJowYvJ by ProjectDCL (@ProjectDCL) on CodePen

[PointC 14,418 Likes (Superhero)]

I'd probably add a small delay on the "reset" tween and set overwrite to true. Something like this:

 

See the Pen 364a470e414172b8fbd6a7420de056f6 by PointC (@PointC) on CodePen

 

More info about overwrite.

 

Happy tweening.

 

[DanielLav 1 Likes (Newbie)]

Oh yeah! This is exactly what I was looking for.

 

And damn, I couldn't see it in the documentation when I was looking for a solution.

 

And if I want to assign the defaults value only for the gsap animation that is running in this place, do I need to use only a timeline? Is there any way I can't do it NON-globally for gsap?

[Cassie 5,365 Likes (Superhero)]

You can define defaults in a timeline or globally if that's what you're asking ☺️