Jump to content
Search Community

Animations not working properly after a lot of clicks

Samuel7 test
Moderator Tag

Go to solution Solved by akapowl,

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 comment
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 ee59fc00633ed6648901476c300db954 by akapowl (@akapowl) on CodePen

 

 

 

Hope this helps.

And welcome to the forums :) 

 

Cheers,

Paul

 

 

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

  • Solution

 

@Samuel7

 

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 defd0bb740da609e6a25d2f06adb714b by akapowl (@akapowl) on CodePen

 

 

Edit: 

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

 

 

 

  • Like 2
  • Thanks 1
Link to comment
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 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.
×
×
  • Create New...