Jump to content


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.



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



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.



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.