Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
stereoS

Increment rotation tween starts at beginning each time

Recommended Posts

Hi,

 

I would like to make my box rotates to 120 degrees, and then from 120 to 240, and then 240 to 360.. But right now each time it starts at 0 and goes to 120 degrees.

TweenMax.to(box, 2, {rotation: '+=120', transformOrigin: '50% 50%', repeat: -1, repeatDelay: 2});

What is the correct way to increment a rotation?

 

Thx

See the Pen GVQbzb by elisabeth_hamel (@elisabeth_hamel) on CodePen

Link to post
Share on other sites

There would be a few ways to do that. I think the easiest in this case is to place the tween in a function that gets called at the end of each tween.

 

function spinMe() {
    TweenMax.to(box, 2, {
        rotation: "+=120",
        transformOrigin: "50% 50%",
        onComplete: spinMe
    });
}
spinMe();

Hopefully that helps. Happy tweening.

:)

 

  • Like 1
Link to post
Share on other sites

Thanks but do you know why it doesn't work with repeat: -1? Because that's exactly the point of it right?

Link to post
Share on other sites

The tween start and end values get recorded when the tween is created. In this case that is 0 degrees and 120 degrees (+=120). You then tell the engine to play the tween and repeat when it's done. So it plays from 0 --> 120 over and over. That's working as intended.

 

The easiest approach is the one I posted above. If you need a delay between repeats you can use delayedCall or use an empty tween that has a 2 second duration.  Does that make sense?

 

Happy tweening

:)

 

Link to post
Share on other sites

Ok got it it actually makes sense!

Thanks a lot :)

  • Like 1
Link to post
Share on other sites
19 minutes ago, stereoS said:

do you know why it doesn't work with repeat: -1?

 

It wouldn't be a true "repeat" if it wiped out values and used new ones. But @PointC gave a great solution, and here's another alternative: 

 

See the Pen 482b8b02df7d5f3b970861163bdb17a0?editors=0010 by GreenSock (@GreenSock) on CodePen

 

TweenMax.to("#box", 2, {
	rotation: "+=120",
	transformOrigin: "50% 50%",
	onComplete: function() {
		this.invalidate().delay(2).restart(true);
	}
});

Does that help? 

  • Like 2
Link to post
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.

×