mouseleave event isn't working properly

[AsKadir 37 Likes (Newbie)]

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

[GreenSock 18,586 Likes (Superhero)]

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? 

[AsKadir 37 Likes (Newbie)]

@GreenSock Hi, Jack!

I forgot about overwrite mode.

 

 

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.

 

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

 

 

[GreenSock 18,586 Likes (Superhero)]

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. 

[AsKadir 37 Likes (Newbie)]

@GreenSock

Thanks, Jack!

Now everything is clear.