GSAP counter not working for all elements

[amitr95]

I have a section which contains stats that trigger the "count up" animation once it's in view.

 

However, when you get to this section, it gives varying results. Sometimes it only counts the first card up and then the last 2, sometimes just the first card.

 

I'm trying to trigger all of the cards to start counting up together. 

 

Any ideas why the varying results?

 

See the Pen eYKBLQo by amit_rai95 (@amit_rai95) on CodePen

[Trapti]

Hey, You have js errors check console fix that. 

[Rodrigo]

Hi,

 

@Trapti is right, you have issues because one of the values you're passing is actually a string, because of the comma you are using. I would recommend to use numbers without any symbols in them until GSAP returns the tweened value (on the onUpdate callback), then you can set their precision and format them correctly using toLocaleString:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toPrecision

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

 

Happy Tweening!