Share Posted January 17, 2020 Hi All, How to make it the reverse animation once the object's rotation is finished? And i am looking for the repeated loop continuously. Finally If I would like to stop/pause it after a while ? See the Pen QWwZGQd by bootstrap007 (@bootstrap007) on CodePen Link to comment Share on other sites More sharing options...
Share Posted January 17, 2020 Hey bootstrap007. You can set yoyo: true to reverse it once it's completed. You might want to apply it to the timeline instead if you're using a timeline (but you don't even need a timeline for something this simple). Here's how I'd do using GSAP 3's formatting: See the Pen vYEVgEO?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Author Share Posted January 17, 2020 Hi ZachSaucier, Thanks & Hope you are doing great! This is great. It works perfectly fine. Also, how can I pause or stop the animation after a while? Link to comment Share on other sites More sharing options...
Share Posted January 17, 2020 There are lots of ways What do you mean "a while"? You could change the repeat count to be a positive number and it would go for that many times. Or you could pause it by calling .pause() on the timeline (if you're using one) after a set amount of time using .delayedCall() or based on a user's interaction. Link to comment Share on other sites More sharing options...
Author Share Posted January 17, 2020 Yeah, Something like pause it (rotation) after a while and then I would prefer this one to animate and move away from screen. Link to comment Share on other sites More sharing options...
Share Posted January 17, 2020 Again, you'll have to be more clear with what "a while" means. Do you mean after a certain number of repeats? After a certain amount of time? After the user interacts with it in some way? Link to comment Share on other sites More sharing options...
Author Share Posted January 17, 2020 Hi, I have created another CodePen ( See the Pen BayqRjB by bootstrap007 (@bootstrap007) on CodePen ) and this will make it clear for you. As you see the rotation animation is repeating continuously until the another 2 boxes appear on the screen. After the completion of animating those 2 boxes (left & right side ones) on the screen then the rotation of the center box should stop or pause it. That's exactly what i am looking for. See the Pen BayqRjB by bootstrap007 (@bootstrap007) on CodePen Link to comment Share on other sites More sharing options...
Share Posted January 17, 2020 There are several ways you could set that up. One way is to use the onComplete event of the second box: See the Pen dyPgWJa?editors=0010 by GreenSock (@GreenSock) on CodePen Notice that I saved the first tween to a variable so that I could reference it later in the onComplete. 1 Link to comment Share on other sites More sharing options...
Author Share Posted January 17, 2020 @ZachSaucier Wow! Thanks & really appreciated. 😊 You are really awesome and once again thanks for the great support! 👏👏 2 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