Share Posted August 27, 2016 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). Thanks, James See the Pen NAVmxL by hackfin (@hackfin) on CodePen Link to comment Share on other sites More sharing options...
Share Posted August 29, 2016 Did you fix it? It seemed to be working fine for me. If you're still having trouble, I would suggest starting from scratch. That sure seems like a lot of code for a progress bar. Here's a really clean, and simple demo showing a progress bar at different speeds. See the Pen rOKpBb?editors=0010 by MAW (@MAW) on CodePen 3 Link to comment Share on other sites More sharing options...
Share Posted August 29, 2016 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! 4 Link to comment Share on other sites More sharing options...
Author Share Posted August 29, 2016 Thanks to all. I figured out my issue with my setTimeout function and updated the codepen. 2 Link to comment Share on other sites More sharing options...
Share Posted August 29, 2016 Hello hackfin, Instead of using setTimeout() you can use the GSAP delayedCall() method if you like: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/delayedCall/ //calls myFunction after 1 second and passes 2 parameters: TweenMax.delayedCall(1, myFunction, ["param1", "param2"]); function myFunction(param1, param2) { //do stuff } Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Share Posted August 30, 2016 How does that bootstrap one work? That definitely isn't linear, and you can't restart it. See the Pen GZPdbe?editors=0010 by jonathan (@jonathan) on CodePen 1 Link to comment Share on other sites More sharing options...
Share Posted August 30, 2016 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 1 Link to comment Share on other sites More sharing options...
Share Posted August 30, 2016 I'm guessing bootstrap probably has some CSS transition/animation tied to it. Link to comment Share on other sites More sharing options...
Share Posted August 30, 2016 Alright restart should work now.. i gave transition:none; on the .progress-bar .. good catch! See the Pen GZPdbe by jonathan (@jonathan) on CodePen /* override bootstrap hoopla */ .progress-bar { -webkit-transition:none; transition:none; } 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now