Jump to content

matt lohkamp

animating the value attribute of the progress element in Edge

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

This is easy to reproduce: in chrome and firefox, the bar fills up as the progress value attribute tweens from 0 to 100.


On edge, the bar stays blank, until the tween finishes and the bar suddenly catches up.


**edit** - I've been able to create similar behavior using a requestAnimationFrame loop - it seems like the commands to change the element value are stacking up, somehow, so that their execution is being delayed, at least visually, until they reach some kind of critical mass. Continuously logging the progress value to the console shows that the value is being incremented properly, but the progress element is clearly not being re-rendered to reflect this in sync. Makes it seem like this might be an IE/Edge specific bug.

See the Pen QvjjoM by mattlohkamp (@mattlohkamp) on CodePen

Link to comment
Share on other sites

Technically, that's an attribute (not a property or CSS value), so you should probably use the AttrPlugin:



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