Jump to content
GreenSock

marcamos

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() {
  console.log(tlMaster.totalProgress());
}

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

 

Thanks!

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.

http://www.w3schools.com/jsref/jsref_tofixed.asp

console.log(tlMaster.totalProgress().toFixed(2));
console.log(tlMaster.totalTime().toFixed(2));

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