Jump to content
Search Community

Progress Bar Example not Working Correctly

hackfin test
Moderator Tag

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 am working on a progress bar demonstration that simulates the downloading of multiple files.  To simulate the time it takes to download each file, I created a random time between 1 and 5 seconds as the lag between each tween.  Either the function that creates the lag or one of my methods that creates the tween seems to be the problem.  At this point, I have looked at it for such a long time that I just can not figure it out.  Any assistance or advice would be appreciated.  See the codepen link for a demonstration of the issue(s).




See the Pen NAVmxL by hackfin (@hackfin) on CodePen

Link to comment
Share on other sites

To add tonBlakes great example.


Here is another progress bar test


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


And one using Aria progress bar


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


And Bootstrap Aria progress bar


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


Hopefully they give you ideas.. Happy Tweening!

  • Like 4
Link to comment
Share on other sites

Hello hackfin, Instead of using setTimeout() you can use the GSAP delayedCall() method if you like:



//calls myFunction after 1 second and passes 2 parameters:
TweenMax.delayedCall(1, myFunction, ["param1", "param2"]);

function myFunction(param1, param2) {
    //do stuff

Happy Tweening! :)

  • Like 1
Link to comment
Share on other sites

Thanks Blake for pointing that out. ;) The aria bootstrap one is a little buggy, and wont bring back to zero on restart, hence why i dont like bootstrap anything. It seems you might have to use a fromTo() tween to bring it back to zero. But it wont except the restart of the tween though. I think something in the bootstrap JS  is conflicting with GSAP. But i haven't had time to debug it ;)

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