Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Impatient Clicking Breaks GSAP

Recommended Posts

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

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!

  • Thanks 1
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.