Jump to content
Search Community

mouseleave event isn't working properly

AsKadir test
Moderator Tag

Recommended Posts

Hi!

I'm trying to make slideToggle() by gsap for menu, which has submenus.

 

So if move slow and hover on menu items, everything working fine,

but if mouseenter fast, mouseleave starts to work not properly.

 

And also question about timeline,

as you can see in comment area in js,

I tried to create timeline first, but it doesn't work.

 

What am I doing wrong?

Can you help me, please?

 

See the Pen zYGPWZG by ChicagoJostik (@ChicagoJostik) on CodePen

Link to comment
Share on other sites

The main problem is that in your mouseleave, you did a clearProps tween but you did NOT stop the other tween that was affecting the same element (from the mouseenter). The default overwrite mode in GSAP 3 is false. So all you need to do is set overwrite: true on that tween and it'll find any other tweens of that same element and immediately kill them. 

 

As for your timeline not working, you had the values inverted (you were going from height: "auto" to height: 0). And instead of doing a separate set() call and then a to(), you could just combine those into a fromTo(). Your way wasn't "wrong", it's just more verbose. Here's a fork with the corrections: 

 

See the Pen 89082759e2f311dce8bb350cf740e939?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

9 hours ago, AslanGoi said:

Can you tell me is there a big difference fromTo between GSAP v2 and GSAP v3?

I created exactly the same code using gsap v2 and there fromTo not working like in your code.

Yep, because animating to a width/height of "auto" is a new feature in GSAP 3. There's extra work under the hood because technically 0 --> "auto" isn't really something that can be interpolated. In GSAP 3, it figures out the actual width/height internally when it's "auto" and then plugs that into the tween. 

  • Like 2
  • Thanks 1
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...