qqignatqq Posted May 24, 2021 Share Posted May 24, 2021 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 More sharing options...
elegantseagulls Posted May 24, 2021 Share Posted May 24, 2021 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 More sharing options...
GreenSock Posted May 24, 2021 Share Posted May 24, 2021 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? 1 Link to comment Share on other sites More sharing options...
GreenSock Posted May 24, 2021 Share Posted May 24, 2021 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 More sharing options...
qqignatqq Posted May 24, 2021 Author Share Posted May 24, 2021 25 minutes ago, GreenSock said: Better? https://disk.yandex.ru/i/QHUxuwHmkLsneg Thanks for your help, but I managed to break both buttons Link to comment Share on other sites More sharing options...
GreenSock Posted May 24, 2021 Share Posted May 24, 2021 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? 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now