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

Awsome! so simple. thank you.

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

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