Jump to content
Search Community

Progress Counter

marcamos test
Moderator Tag

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

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.
×
×
  • Create New...