Jump to content
Search Community

Animating the value of a progress bar with gsap.from not working as expected

cselin test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

I've got a lot of progress bars on a page that I am animating as they appear with scrollTrigger. I would like to use from() to just tell them all to animate from 0 up to their value. However, this doesn't seem to work - it results in progress bars with their value set to 0. 

 

The codepen is as simple as I can get it! 

 

I'm aware I could also do something like :

<progress value="58" max="100" data-value="58"> 58% </progress>
 

And pair it with

gsap.fromTo(this.progressTargets, { value: 0 }, {
  value: function (index, target) {
    var value = target.dataset.value;
    return value;
  },
  stagger: 0.25,
  duration: 1.5,
});

But it feels like I'm adding unnecessary cruft into the html markup. 

Does value need to be used in a different way to other properties? I can tween it using fromTo() with no problem if I define the values, it just seems to not work as I'd expect with from(). 

See the Pen wvmRLVX by cselin (@cselin) on CodePen

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