Animation break

[Romanus]

Hello! I am writing through google translator. Sorry if I'm not making my point clear.

I made a menu animation on the timeline. She works well. But if you close the menu immediately after opening, and immediately open it again (press 3 times quickly on the menu button), the animation is displayed very poorly. Please tell me what am I doing wrong

See the Pen ExEZjRo by romanusss (@romanusss) on CodePen

[GreenSock]

That's because of two problems in your code: 

1. You're creating an entirely new timeline on every click and you didn't kill() the old one or set overwrite: true on your tweens, so you've got conflicting tweens (multiple running that are fighting for control of the same property of the same elements). 
2. You've created a logic problem by using .from() tweens. Remember that .from() tweens use the CURRENT value as the destination. So let's say opacity starts at 1 and you do a .from(...{opacity: 1}). That would grab the current value (0) as the destination and IMMEDIATELY set opacity to 1 and then animate back to the destination (0). Great. But what if you click again quickly and opacity is at 0.98 when you create ANOTHER .from(...{opacity: 1}) tween? That would take the CURRENT value (0.98 in this case) and use it as the destination, thus your final animation would go from 1 to 0.98 and stop! Again, this is a logic problem in your code, not a bug in GSAP. 

There are many, many approaches you could take to solve this. Here is one where you just create your timeline up front once, and then simply toggle the playback direction via timeScale() on each click. I'm playing it 50% faster when closing: 

See the Pen oNqBjoK?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Another solution would be to avoid .from tweens. Instead, you could gsap.set() the initial values and then animate to() the destination ones. And make sure you set overwrite: true on your tweens or it may be easier to just use a variable to remember the previous timeline so you can just .kill() it before creating the new one to avoid conflicts. 

 

Good luck!