KJames Posted January 15, 2022 Share Posted January 15, 2022 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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted January 15, 2022 Solution Share Posted January 15, 2022 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? Link to comment Share on other sites More sharing options...
KJames Posted January 15, 2022 Author Share Posted January 15, 2022 Awsome! so simple. thank you. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now