Revert a tween once the button is clicked and animated

[Saqlain 0 Likes (Newbie)]

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();
}

 

[GreenSock 18,591 Likes (Superhero)]

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!

[Saqlain 0 Likes (Newbie)]

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?

[Cassie 5,406 Likes (Superhero)]

It's unclear what you're trying to achieve with your code, could you elaborate on the goal or attach a minimal demo showing the issue? Thanks!