Best way to tween a text representing elapsed time?

[Gary]

Maybe this is a newbie question, but here goes...

 

I calculate the total time a tween will take, considering the delay, duration, repeat and repeatDelay.  While the tween is running, I'd like to have a label count up from 0 to the total time.  I have a div like this..

<div id="foo">0</div>

What would be the best way to do a linear tween of the label to show the time as it is elapsing, preferably with no more that two decimal places?

[Jonathan]

Hello Gary, and Welcome to the GreenSock Forum.

 

Here is an example that uses the onUpdate of the tween to animate the time():

 

My example:

See the Pen GsDqn by jonathan (@jonathan) on CodePen

 

time()

Gets or sets the local position of the playhead (essentially the current time), not including any repeats or repeatDelays. If the tween has a non-zero repeat, its time goes back to zero upon repeating even though the totalTime continues forward linearly (or if yoyo is true, the time alternates between moving forward and backward). time never exceeds the duration whereas the totalTime reflects the overall time including any repeats and repeatDelays.

var $circle = document.getElementById("circle");
TweenMax.to($circle, 4, {
    rotation:360,
    force3D:true,
    onUpdateParams:["{self}"],
    onUpdate:function(tl){
       var tlp = tl.time().toFixed(2); // only 2 decimal places
       $("#foo").html(tlp);
    }                        
});

I use the special property onUpdateParams to pass the tween instance {self} to the onUpdate function. In the onUpdate function you get {self}, which is being referenced as tl. Then i check for the time() and have it fixed to only 2 decimal places.

 

Is that what you were looking for?

 

[Gary]

Perfect!  Although I'm using totalTime() instead.

 

Thanks, Jonathan.

[Jonathan]

No worries.. glad to help