# Looping a tween

## Recommended Posts

Hi everyone,

is possible to make an object rotate forever with tweenMax/Lite?

I would prefer it to using ENTER_FRAME

##### Share on other sites

Absolutely. That's what the "repeat" special property is for in TweenMax. To repeat infinitely, use -1. Otherwise use the number of times you want it to repeat. For example, to repeat twice, do:

`TweenMax.to(mc, 1, {rotation:"360", ease:Linear.easeNone, repeat:2});`

Or to loop infinitely, do this:

`TweenMax.to(mc, 1, {rotation:"360", ease:Linear.easeNone, repeat:-1});`

Also, you might want to reduce the number slightly to avoid the appearance of a small pause in the rotation due to the fact that the first and last rendering of the animation are on exactly the same spot. In other words, if you rotate from 0 to 360, the first frame will be 0, it will increase each frame after that and then the last frame will be 360 which is exactly the same thing as 0 so when it loops and renders the starting position on the very next frame, it doesn't move because 0 is 360 in terms of rotation. So depending on the duration of your tween (how much rotation is incremented each second/frame), you'd want to decrease the final rotation state. For example, if your tween lasts 1 second and rotates 360 degrees in a swf that runs at 30fps, it's moving 360 / 30 every frame (12 degrees) so you'd want your repeating tween to go to rotation:"348" to look perfectly smooth.

Also, you can repeat infinitely with TweenLite by using an onComplete like this:

```function doTween():void {
TweenLite.to(mc, 1, {rotation:"348", ease:Linear.easeNone, onComplete:doTween});
}
doTween();```

Since the onComplete calls the same function that spawned the tween to begin with, it just keeps going.

• 1

##### Share on other sites

yeah do this

import com.greensock.*;

import com.greensock.easing.*;

TweenMax.to(someMovieClip, 1, {rotation:360, repeat:-1, ease:Linear.easeNone});

now technically there is doubling of frames as the objects start value of 0 is visually the same as 360.

with a fast framerate this won't be noticeable.

you could try hacking the end value to something less than 360

TweenMax.to(someMovieClip, 1, {rotation:355, repeat:-1, ease:Linear.easeNone});

There may be someone lurking on these forums who knows of a dead accurate way to do this

Carl

lol

##### Share on other sites

Ha ha. Great minds think alike. And apparently ours do too

##### Share on other sites

Ehy thank you to both =)

Will try and give you feedback ASAP

##### Share on other sites
On 1/14/2011 at 11:52 PM, GreenSock said:

Absolutely. That's what the "repeat" special property is for in TweenMax. To repeat infinitely, use -1. Otherwise use the number of times you want it to repeat. For example, to repeat twice, do:

```
TweenMax.to(mc, 1, {rotation:"360", ease:Linear.easeNone, repeat:2});```

Or to loop infinitely, do this:

```
TweenMax.to(mc, 1, {rotation:"360", ease:Linear.easeNone, repeat:-1});```

Also, you might want to reduce the number slightly to avoid the appearance of a small pause in the rotation due to the fact that the first and last rendering of the animation are on exactly the same spot. In other words, if you rotate from 0 to 360, the first frame will be 0, it will increase each frame after that and then the last frame will be 360 which is exactly the same thing as 0 so when it loops and renders the starting position on the very next frame, it doesn't move because 0 is 360 in terms of rotation. So depending on the duration of your tween (how much rotation is incremented each second/frame), you'd want to decrease the final rotation state. For example, if your tween lasts 1 second and rotates 360 degrees in a swf that runs at 30fps, it's moving 360 / 30 every frame (12 degrees) so you'd want your repeating tween to go to rotation:"348" to look perfectly smooth.

Also, you can repeat infinitely with TweenLite by using an onComplete like this:

```
function doTween():void {
TweenLite.to(mc, 1, {rotation:"348", ease:Linear.easeNone, onComplete:doTween});
}
doTween();```

Since the onComplete calls the same function that spawned the tween to begin with, it just keeps going.

Sorry for bumping an old thread but I was searching for a way to indefinitely repeat a rotation animation using TweenLite. When I use the function stated above I get syntax error "Uncaught SyntaxError: Unexpected token :" I realize that maybe the plugin syntax has changed over the past 6 years. Is there another way in TweenLite to infinitely continue an animation? Due to size constraints I can't use TweenMax for this.

Thanks!

Edited by Ali Farooq

##### Share on other sites

Hi Ali,

The code in this thread is AS3 for Flash. An "Uncaught SyntaxError: Unexpected token" error sounds like something you would see in the browsers javascript console. If you are using JavaScript you would have to omit the return type :void