Jump to content


Progress Counter

Go to solution Solved by PointC,

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

I'm trying to create a progress counter that mimics what's used in the Timeline Tip: Understanding the Position Parameter demos — see the first one, labeled "No position: Direct Sequence", and note the helpful progress counter I've pointed out here.


I've hunted all around Google, Codepen, and of course here in the forums and I'm coming-up empty. Maybe my search-fu is weak.


I've got a bit of sample code that gets me part-way there:

var tlMaster = new TimelineMax({onUpdate:updateCounter});

tlMaster.to('#item', 10, {y:500});

function updateCounter() {

…but this is generating numbers faster than desired; I'd like the update frequency to be more like your demos I've linked-to above. Any tips, or pointers?


The above code is only sending a log to the console — I'll handle the actual insertion of the progress value into a DOM node once I figure out the timing part.



Link to comment
Share on other sites

Wait a minute, I believe this CodePen demo gets me what I want: 

See the Pen ryfJu by GreenSock (@GreenSock) on CodePen

I'm going to give it a try and I'll report back.

Link to comment
Share on other sites

  • Solution

Hi marcamos :)


Looks like you may have found your answer, but I think you are just looking for the toFixed() Method.



Happy tweening.


  • Like 4
Link to comment
Share on other sites

Yup, confirmed, that is what I was in need of.


Thanks PointC!

  • Like 1
Link to comment
Share on other sites

You can also do this with progress() and a bitwise operator:


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

console.log( tlMaster.progress() * 100 >> 0 );  

Also if you want to do elapsed time with toFixed(2) like PointC suggested above:


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



  • Like 4
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.