Jump to content
GreenSock

rgfx

mouseout issue on navigation

Go to solution Solved by OSUblake,

Recommended Posts

Hello, long time...

 

So I have this issue with my animated menu. All my elements are nested in `has-dropdown', yet as soon I leave the link area my 'mouseout' gets triggered.

 

Also when moving my mouse in and out really fast the stagger messes up. 

 

I can't seem to get my head around why this is occurring. Hopefully someone can help. 

 

See the Pen qBVBPOR by rgfx (@rgfx) on CodePen

Link to comment
Share on other sites

  • Solution

Welcome back @rgfx

 

I think you're looking for mouseleave events.

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event

 

If you want to do a forEach, GSAP has a toArray utility.

https://greensock.com/docs/v3/GSAP/UtilityMethods/toArray()

 

And for creating timelines, you don't use new.

// bad
const stagMenu = new gsap.timeline({ paused: true });

// good
const stagMenu = gsap.timeline({ paused: true });

 

Also, this isn't going to do anything but put your timeline in it's original starting place.

stagMenu.restart(true, false).reverse();

 

I doubt you want this, but if you wanted the timeline to restart all the way from reverse, you would need to do something like this.

stagMenu.progress(1).reverse();

 

See the Pen oNoNpJz by GreenSock (@GreenSock) on CodePen

 

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

Awesome tips man, learned more then I expected. This is exactly what I needed. Thank you so much!

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