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

# 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

##### 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.

• 1
##### 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?

##### 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

##### Share on other sites

Ok got it it actually makes sense!

Thanks a lot

• 1
##### 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?

• 2