Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Animating Native HTML5 Progress Bar

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