Jump to content
GreenSock

Gary

Best way to tween a text representing elapsed time?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?

Link to comment
Share on other sites

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?

 

:)

  • Like 3
Link to comment
Share on other sites

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

 

Thanks, Jonathan.

Link to comment
Share on other sites

No worries.. glad to help :)

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