Devotee007 Posted March 29, 2022 Share Posted March 29, 2022 Hi, I try to rotate an image 90 deg at a time. During the tween it shouldn't be possible to click button to add another 90 deg. I have done the below code, but it only plays once. I have tried play(), resume(), restart(). const rotateImg = document.querySelector('.js-btn-rotate'); let tween = gsap.to(".mt-1", {rotate:"+=90", duration:.5, paused:true}); rotateImg.addEventListener('click', function(event) { if(!tween.isActive()){ tween.play(); } }); Link to comment Share on other sites More sharing options...
PointC Posted March 29, 2022 Share Posted March 29, 2022 Please try tween.play(0) or tween.restart(). Happy tweening. 2 Link to comment Share on other sites More sharing options...
Solution Carl Posted March 29, 2022 Solution Share Posted March 29, 2022 try tween.invalidate().restart() sneaky @pointC jumps in but here are the docs in case you want to learn more https://greensock.com/docs/v3/GSAP/Tween/invalidate() 3 Link to comment Share on other sites More sharing options...
Devotee007 Posted March 29, 2022 Author Share Posted March 29, 2022 7 minutes ago, PointC said: Please try tween.play(0) or tween.restart(). Happy tweening. Thank you for the reply. It works, but I don't want to start from the beginning, I want it to keep rotating on the next button click. I thought += did that. Link to comment Share on other sites More sharing options...
PointC Posted March 29, 2022 Share Posted March 29, 2022 Yeah - that was my fault for not reading the question correctly. I'd go with @Carl's solution. 1 Link to comment Share on other sites More sharing options...
Devotee007 Posted March 29, 2022 Author Share Posted March 29, 2022 8 minutes ago, Carl said: try tween.invalidate().restart() sneaky @pointC jumps in but here are the docs in case you want to learn more https://greensock.com/docs/v3/GSAP/Tween/invalidate() Thanks for the reply, this works, but I don't know why. I will go read more on the link. Link to comment Share on other sites More sharing options...
Carl Posted March 29, 2022 Share Posted March 29, 2022 in this demo it continues from the current rotation value (not beginning) See the Pen LYeLdGg by snorkltv (@snorkltv) on CodePen if you still need help please provide a demo that clearly shows the issue. perhaps I'm misunderstanding. 3 Link to comment Share on other sites More sharing options...
Devotee007 Posted March 29, 2022 Author Share Posted March 29, 2022 11 minutes ago, Carl said: in this demo it continues from the current rotation value (not beginning) if you still need help please provide a demo that clearly shows the issue. perhaps I'm misunderstanding. I'm sorry, I meant that I didn't understand why I had to use tween.invalidate().restart() and not only play(). Your solution worked great. I have read more about it at the page you linked to now too. Now I get it. 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