Increment rotation tween starts at beginning each time

[stereoS]

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

[PointC]

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.

 

[stereoS]

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

[PointC]

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

 

[stereoS]

Ok got it it actually makes sense!

Thanks a lot 

[GreenSock]

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?