Sherlok Posted June 15, 2023 Share Posted June 15, 2023 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? Link to comment Share on other sites More sharing options...
Solution GreenSock Posted June 15, 2023 Solution Share Posted June 15, 2023 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: 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. 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. 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. Link to comment Share on other sites More sharing options...
Sherlok Posted June 15, 2023 Author Share Posted June 15, 2023 @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! 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