How to add, change an animation while current animation is running?

[KJames]

Hi, I am using gsap with react. I want to make an animation like this.

"When the page renders, square(rectangle) is rotating(360') infinitely. And when a button is clicked, rotating stops and its shape is changed to circle, and translated down to some degree of Y with bounce effect."

I am able to make rotating square on page renders, but have some difficulty making "when a button is clicked, rotating stops and its shape is changed to circle".

I am trying my best with conditional timeline(), but it also does not work.

How can I implement this with gsap? (specific react implementation is on my own, but any supported gsap workaround?)

See the Pen mdBvRPG by yojames (@yojames) on CodePen

[GreenSock]

You could do something like this in your onClick(): 

animationRef.current.pause();
gsap.to(squareRef.current, {
  borderRadius: "50%",
  duration: 0.5,
})
gsap.to(squareRef.current, {
  y: 200,
  duration: 1.2,
  ease: "bounce"
});

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

 

Just pause the infinitely looping animation and run your other tweens. You could toss those into a timeline if you want, but I don't see any reason to do so. 

 

Is that what you were looking for? 

[KJames]

Awsome! so simple. thank you.