Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
qqignatqq

How do I use animation in a function?

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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? 

  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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? 

  • Like 1
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.
×