Failing Animation

[Mantvydas 11 Likes (Newbie)]

Dear GreenSockers,

I have been making button animation for mobile navigation. Looks everything nice, but sometimes when you don't wait until animation end and you press button again, animation breaks and in the end I have this (see image).

 

What I am doing wrong here?

 

See the Pen yEgBGr by MantvydasBinderis (@MantvydasBinderis) on CodePen

[PointC 8,599 Likes (Superhero)]

I didn't see it break, but when something is clicked too quickly it can cause an overwrite and the elements can get into the wrong starting position. You can always make a timeline and play/reverse on click. 

 

You could also check if something is tweening and prevent additional clicks by using the isActive() or TweenMax.isTweening() methods.

 

https://greensock.com/docs/TweenMax/isActive()

https://greensock.com/docs/TweenMax/static.isTweening

 

Happy tweening.

 

PS Your pen is using an old version of GSAP (1.18.0). I know it's confusing as it says latest, but if you use the Quick-add drop down in CodePen, you should get the current version. 2.0.1. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>

 

 

[Mantvydas 11 Likes (Newbie)]

Not the answer I was looking for but thanks for trying to help

[determin1st 11 Likes (Newbie)]

You should create single timeline with all tweens as PointC sayed ^ for better control but I dont recommend to use reverse, instead, create another "reverse" timeline and manage state using internal variable (it's simpler than adding/removing classes to DOM element). After that you have several options when state changes:

 

1. block state change if some of timelines is active.

2. kill() or finish opposite active timeline and start target state change timeline.

3. combine timelines, but it's not needed as it is only two states.. (on/off)

 

also, you can re-create timelines every time instead of using same timeline instances (they will overwrite each other as they use same targets) but you have to hold those instances in memory for further checks.