Jump to content
Search Community

Revert a tween once the button is clicked and animated

Saqlain test
Moderator Tag

Recommended Posts

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

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...