Jump to content


Animating Native HTML5 Progress Bar

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 trying to use GSAP to animate a native HTML5 progress bar showing the progress of a timeline.  


See the attached pen.  


The first example uses tl.progress()*100 to get to the value of 100.  The value itself is being updated (see the #progress1_progress div), but it is not updating the progress element itself.  

The second example with the value hard-coded of 100 in works fine.  


It seems this should work.  Any ideas why it is not?  



See the Pen YLWBxy by rfenik (@rfenik) on CodePen

Link to comment
Share on other sites

Hi @ryanf


value:( tl1.progress()*100 ) // <- this equals 0 at the start ... so tween to 0 will do nothing


In your tl1 your tweening to the value of 0 by passing the tweens .progress() as the value (which hasn't yet moved).


Not sure what your trying to achieve exactly, but if you want a progress to animate up to some predetermined value ( based on the value attribute perhaps) you can tween "from" 0 up to that set value.


See the Pen yjJZdZ?editors=1010 by sgorneau (@sgorneau) on CodePen



  • Like 2
Link to comment
Share on other sites

This is a simplified example. 


I would like to animate the progress of a timeline in a native progress element.  I have a master timeline with nested timelines, and want to show the progress of the master timeline in a progress element. 


Putting the values in explicitly works fine, it isn't working as-expected with tl.progress() though.  




Link to comment
Share on other sites

Ah, ok. Here is simple pen showing how to tie the progress value of a timeline to the value of an HTML5 progress element.


See the Pen yjJwom by sgorneau (@sgorneau) on CodePen


  • Like 6
Link to comment
Share on other sites

Yes, that's it!


Thank you.  

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.