rgfx Posted January 25, 2022 Share Posted January 25, 2022 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 More sharing options...
Solution OSUblake Posted January 25, 2022 Solution Share Posted January 25, 2022 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 3 1 Link to comment Share on other sites More sharing options...
rgfx Posted January 25, 2022 Author Share Posted January 25, 2022 Awesome tips man, learned more then I expected. This is exactly what I needed. Thank you so much! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now