Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Héctor

Infinite timeline tween paramaters update [solved]

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Thanks Carl,

 

This is the thing I was looking for.

 

Regards

Link to comment
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.
×