Jump to content
Search Community

Animating Native HTML5 Progress Bar

ryanf 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 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?  

 

Thanks.  

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.  

 

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