Infinite timeline tween paramaters update [solved]

[Héctor]

Hello,

 

Suppose this code:

 

rollTween = new TimelineMax( repeat: -1, repeatDelay: 0});
rollTween.insert([TweenLite.to(minutesBar, 1, { rotation: "+=360", ease: Linear.easeNone } ), TweenLite.to(hoursBar, 1, { rotation: "+=30", ease: Linear.easeNone } )]);

 

Where minutesBar and hoursBar are the pointers of a clock asset that I want to animate. I would like to achieve an infinite rotation for the pointers. The problem is with the hours pointer.

 

As its completes the 30 degrees rotation, it jumps back to its starting position to repeat the same over and over. I would like to know if there is any way to change that, so the tween uses his updated rotation value everytime the timeline repeats it.

 

Thanks,

Héctor

[Héctor]

I can think on a workaround to the issue:

 

rollTween = new TimelineMax( repeat: -1, repeatDelay: 0});
for (var i:uint = 0; i < 12; i++) {
rollTween.append([TweenLite.to(minutesBar, 1, { rotation: "+=360", ease: Linear.easeNone } ), TweenLite.to(hoursBar, 1, { rotation: "+=30", ease: Linear.easeNone } )]);
}

 

Someone could ask why I needed a timeline (when using onComplete events to update the rotation value and restart the tween could work) and the fact is one of the animations should have delays inside it so every time the hoursBar rotates 30 degrees, there was a short delay (I was using repeatDelay when I used TimelineMax.

 

For that behaviour the workaround just should include offsets when the appendings are done:

 

   rollTween = new TimelineMax( { paused:true, repeat: -1, repeatDelay: 0 });
   rollTween.append([TweenLite.to(minutesBar, 1, { rotation: "+=360", ease: Linear.easeNone } ), TweenLite.to(hoursBar, 1, { rotation: "+=30", ease: Linear.easeNone } )]);
   for (i = 0; i < 11; i++) {
 rollTween.append([TweenLite.to(minutesBar, 1, { rotation: "+=360", ease: Linear.easeNone } ), TweenLite.to(hoursBar, 1, { rotation: "+=30", ease: Linear.easeNone } )], 0.5);
   }

 

 

Still I'm curious on knowing if there is some kind of property for the tweens being repeated to re-calculate its tween values at the repeat moment.

[Carl]

Hi Hector,

 

Interesting challenge you haver here. Glad to hear you found a solution that works. Frankly, it is quite good.

 

An alternative would be to use the invalidate() method on your hours tween which will force it to re-record new starting values.

 

http://www.greensock...ml#invalidate()

 

something like this will get you pretty close to the effect you need (i didn't account for any delays)

 

 

//give hours bar a name/reference so that it can be invalidated
var tween:TweenLite = TweenLite.to(hoursBar, .5, {rotation:"30"})

var tl:TimelineMax = new TimelineMax({onComplete:refreshTween});

tl.insert(tween);
tl.insert(TweenLite.to(minutesBar, .5, {rotation:"360"}))

function refreshTween(){
tween.invalidate();
tl.restart();
}

 

Also, Thanks a ton for pitching in and trying to help others around here. It is very much appreciated.

 

Carl

[Héctor]

Thanks Carl,

 

This is the thing I was looking for.

 

Regards