scale button on click

[Sherlok]

Hello

 

I try to scale button on click and just after doing everything in this example https://codesandbox.io/s/serene-lena-5o2lhi?file=/src/App.js, it seems to look fine. But when I copy and paste the same code into my project, the animation seems to work, but when I click and move the mouse away quickly, the animation started lagged.  When the mouse stay on button the animation looks good. So, could you please explain what is the best way to do it?

[GreenSock]

Are you saying that the CodeSandbox demo works fine, but it only breaks when you try it in a different project that you can't show us? 

 

A few ideas: 

1. Make sure you don't have any CSS transitions or CSS animations applied to the element that you're animating with GSAP. Those could be conflicting. 
2. If the user might click multiple times quickly, I'd strongly recommend setting something like overwrite: "auto" or overwrite: true on your first tween to make sure any in-progress tweens of that same element are killed to avoid conflicts.
3. You could probably simplify your code a bit into a single tween that has a repeat/yoyo on it: 

   gsap.fromTo(e.currentTarget, {scale: 1}, {scale: 0.75, duration: 0.25, yoyo: true, repeat: 1, overwrite: true});

    

There are other ways too.

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

 

If you still need some help, please make sure you provide a minimal demo that clearly illustrates the issue. We'd be happy to take a look at any GSAP-specific questions you may have. 

[Sherlok]

@GreenSock

Thanks, I just use your code and it works. I guess I should use fromTo tween and also overwrite property, because I also have hover animation.

Thanks for your help!