SVG animation not properly working when clicking multiple times in button..

[Yusuke2223]

So I'm working on SVG's and when I'm clicking the button multiple times it kinda seems give me a bug in the animation and I don't wanna that happen. As you see when you click it like before 0.5secs the animation will stack up..but I wanna reset it and play again the animation not animation like this when I take..Can anyone take me lead how to do it or how can I do it then?
The animation is must be like what first click look like...even I rapidly click the button( because if a user click it multiple times it might be weird for them.) 

thanks for any help. 

See the Pen MWQMKBJ by yowyow3322 (@yowyow3322) on CodePen

[akapowl]

Hello @Yusuke2223

 

The way you handle it there, you are creating new tweens every time you click the button, and the new ones will be conflicting with the older ones.

 

It would be best to create the animations beforehand and just toggle their playstate on click - since you have multiple tweens, just add them all to a timeline and via position parameter set  every tween to start at 0, and set the timeline to paused.

 

Then you can just call tl.restart() on click of the button and it will always restart the tl from the beginning.

 

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

 

[GreenSock]

Yep, @akapowl is exactly right, and I'd follow his advice.

 

If you really need to create the tweens dynamically each time (which can be beneficial sometimes like if you want them to pick up from the current state, but since you're using mostly .fromTo() tweens that doesn't matter), you could set overwrite: true or overwrite: "auto" on your tweens to tell them to find and kill any currently-animating ones of the same elements. 

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

 

Also, I'd strongly recommend always setting transforms via GSAP and use the shortcuts like scale, x, y, rotation, etc. Those are faster and they avoid the ambiguities that can come with using a "transform" value. See:

 

Happy tweening!

[akapowl]

5 minutes ago, GreenSock said:

Also, I'd strongly recommend always setting transforms via GSAP and use the shortcuts like scale, x, y, rotation, etc. Those are faster and they avoid the ambiguities that can come with using a "transform" value

 

And as an addition to that, also best stick to the new syntax for eases - you seem to be mixing syntaxes in your example

 

// this
ease: Expo.easeInOut


// vs this - better

ease: "expo.inOut"

 

 

[Yusuke2223]

Actually overwrite:auto is kinda easy than what akapowl but I think it necessarry to do that hahaaha..Thanks @akapowl @GreenSock