Jump to content

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

Animations not working properly after a lot of clicks

Recommended Posts

Hello, i am new to gsap so i would appreciate some help.

I've created this kind of sliding animation of the nav menu but if i press the hamburger icon a lot of times the animation "breaks", either the burger icon animates suddenly or the nav menu wont slide at all. i apologize if i didnt explained it well english is not my native language so you can try the code for your self and see what i mean, Thanks!.

See the Pen MWeVLxd by samuelsub (@samuelsub) on CodePen

Link to post
Share on other sites


Hey @Samuel7


Unfortunately, there is a whole lot more going wrong in your code, than just the animation not working properly.


On every click when wanting to animate your sidemenu in, you create all those elements, so after a couple of clicks, your HTML will be populated with dozens of those elements. How you could prevent that ( if you really need to create all those elements dynamically ), is by checking for the first toggle, for example, and only on that first toggle create all those elements.




Regarding the animation:

You should avoid creating a timeline on every other click.

Instead, set the timeline up beforehand, and only change the state of it when clicking.


In your case, since the sidemenu is part of the timeline, I took its creation out of the click-event and created it beforehand, too.


Also, since you are checking on that reversed-state when wanting it to play, you should set the timeline to reversed initially.


One more thing is, your last tween in that timeline, that probably is supposed to be a .to() tween, is a .To() tween instead


.To('h2', {x: 0, duration: 0.3, stagger: 0.1}, 'dissapear');


That typo throws an error in your dev-tools console. That's something, you can always check on yourself, when in debug-view on codepen.




Then there is some more stuff, like you applying the click-event to each of your menu-icon bars.

What you could and probably should do instead, is wrap those bars in a menu-icon div, and apply the click-event to that whole wrapper div instead.


Also when creating the list items, you create one list item with different headlines - instead you would probably want to create one list item for each of those headlines.




Those are just the things, that I recognized right away -and I did not 'correct' all of them in the pen below - just the things, to make your timeline run properly. The rest is for you to figure out.


I highly recommend, that you take some time to learn the basics of JavaScript and Frontend-design / -development in general.

There are heaps of great and also free ressources out there, that can help you figure out the basics.


Reading through the getting started guide of GSAP once more, might be another thing, I can recommend to you.






Here is the example pen I was talking about above:


See the Pen OJXvGGX by akapowl (@akapowl) on CodePen




Hope this helps.

And welcome to the forums :) 






  • Like 1
  • Thanks 1
Link to post
Share on other sites

I didnt realize that my code was that bad, i have about 2-3 months that i am coding in Javascript and made some apps but my code is obviously very messy, 

thank you for taking the time to check through this!!.

Link to post
Share on other sites




I just made some changes to my pen because the way I had it set up, it actually did not work for tweening on those dynamically added headlines.


To make tweens also work on all those dinamically added elements, I transfered the setup of the timeline (and the creation of the sidemenu-div, too) into the check for firstToggle on click. See the changes in this pen:


See the Pen rNLdgQE by akapowl (@akapowl) on CodePen




Also, please note, that I made some changes to the syntax of your tweens.




  • Like 2
  • Thanks 1
Link to post
Share on other sites
26 minutes ago, Samuel7 said:

I didnt realize that my code was that bad, i have about 2-3 months that i am coding in Javascript and made some apps but my code is obviously very messy


Just to make sure:


I was not intending to point out, how messy your code was.


I've been coding myself for not too much longer now, and almost everytime I go over bits and pieces that I wrote some time ago, I see how I can improve on them.


It's just the way it is with learning.


Hanging out in these forums here alone helps a lot with getting better on what you write.


So keep up the work. Happy learning  :)


  • Like 4
Link to post
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.