Jump to content
Search Community

GSAP set pause when unhover

DanielLav test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...