How do I use animation in a function?

[qqignatqq]

Hello. I have a function that animates a button to add an item to cart. If the user has not selected the color of the item, the button will be animated. The problem is that there are multiple buttons on the page and I can't use tween.restart() because I can't pass in restart() the button that needs to be restarted. If I use the animation directly in function(elem) {gsap.to.....}, then the animation breaks when I double click (on the second click when the animation hasn't finished yet). Try a quick double click on the "add to cart" button.

https://jsfiddle.net/6c3ok48e/4/

 

If there was a version of the code where I do this:

let tween = gsap.timeline()
.to(:obj,0.15, {scale:0.5, opacity: 0})....

tween.restart({obj:this})

then maybe this problem wouldn't have happened. 

 

I understand that this problem is caused by overwriting the animation. Can you tell me if there is any way to solve this problem?

[elegantseagulls]

You could always add a conditional check to see if the button has been clicked already, so that way you aren't restarting/overwriting your animation.

[GreenSock]

Yep, @elegantseagulls is right. Also:

• There's no such thing as "ease" on a timeline. Maybe you intended to put that in defaults:{}? 
• You were using the old ease syntax. The newer one is easier and more concise: 

  // OLD
  ease: Power1.easeInOut
  
  // NEW
  ease: "power1.inOut"

   

• There's no point in putting yoyo: true on a tween/timeline that has no repeat.
• You could leverage gsap.isTweening() to see if the button is already animating. 

Here's a CodePen version:

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

 

Better? 

[GreenSock]

Oh, and by the way, there's a CustomWiggle tool that makes those wiggles very simple (with one tween). The way you're doing it is totally fine - I just wanted to make sure you knew about it. 

[qqignatqq]

25 minutes ago, GreenSock said:

Better?

https://disk.yandex.ru/i/QHUxuwHmkLsneg

Thanks for your help, but I managed to break both buttons

[GreenSock]

I was just trying to show you the concept - the problem there is that you've got things set up to animate the button itself for part of the time, and the text for part of the time. The condition was only checking for when the button itself was tweening. You can either add the condition to check if the text is tweening, or you can simply use a delayedCall() to reset a variable like isTweening:

See the Pen c28836a71dc3134811af65b5c84c5278 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up?