[Revert a tween once the button is clicked and animated]

1 minute ago, GreenSock said:

Welcome to the community, @Saqlain. 

 

You definitely don't want revert() because that method immediately rewinds the tween all the way to the beginning and reverts any inline styles that were changed by that tween. 

 

It sounds like you just forgot to set a repeat value, as I see you've already got yoyo: true there: 

const btnTween = gsap.to(btnRef.current, {
  duration: 0.2,
  scale: 1.1,
  yoyo: true,
  repeat: 1
});

Does that give you what you want? 

 

It looks like you're using React so I figured I'd recommend reading this article (if you haven't already): 

Happy tweening!

But that's not talking about the scenario I'm in. Should I use a timeOut?

[Revert a tween once the button is clicked and animated]

I'm animating a button and want to revert the tween once it is animated, but it does not work for me. The following function triggers on btnRef click in a React component.

function animateBtn(event) {
  const btnTween = gsap.to(btnRef.current, {
    duration: 0.2,
    scale: 1.1,
    yoyo: true,
  });
  btnTween.revert();
}