DevSMK Posted November 24, 2020 Share Posted November 24, 2020 If you hover over the hamburger menu and click the SVG with a normal click rate, everything works fine, but if you were to encounter someone that were to click the menu before the first or second line in the hamburger SVG is done animating, it effects how the menu transforms. It's supposed to spin into an X when clicked, and pulsate, line-by-line when hovered over, but when someone clicks too rapidly or too many times, it is breaking the animation, or timeline. Also, while harder to reproduce, if you hover over the menu then un-hover then re-hover very quickly it also seems to break where the hover animation is leaving the lines at the end of the animation. These issues sound like they both may be related and solved by the same approach, perhaps, maybe not. I'n new to GSAP so any help is appreciated. Thanks! See the Pen RwRXqBG by SMKDev (@SMKDev) on CodePen Link to comment Share on other sites More sharing options...
_Greg _ Posted November 24, 2020 Share Posted November 24, 2020 You could try something like create timeline for hover animation and check/control it on mouseenter. not sure that this is right way See the Pen YzWmBKv?editors=0011 by -greg- (@-greg-) on CodePen 1 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 24, 2020 Share Posted November 24, 2020 Nekiy2 is right. @DevSMK you're making one of the most common GSAP mistakes. You should always try to setup the animation beforehand and just use control methods inside of event listeners if you can. Welcome to the GreenSock forums! 1 Link to comment Share on other sites More sharing options...
DevSMK Posted November 24, 2020 Author Share Posted November 24, 2020 Thanks @Nekiy2 and @ZachSaucier, I appreciate the help and the link to the common mistakes page. I’ll definitely take a look at that. 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