Jump to content
Search Community

Can only play() tween once

Devotee007 test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...