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

[cselin 2 Likes (Newbie)]

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

[GreenSock 18,232 Likes (Superhero)]

It sounds like you're trying to animate an ATTRIBUTE rather than a property or CSS value. So just use the attr:{} wrapper: 

See the Pen xxWMxab by GreenSock (@GreenSock) on CodePen

[cselin 2 Likes (Newbie)]

Aha, that's perfect! Thank you!