Number counter animation in GSAP 3.x and adding decimal separators to the number

[mvaneijgen]

I'm trying to have a number animate to from 0 to a specific number as many have already ask here before, but I have the feeling all the questions before me where asked with GSAP 2.x because I'm finding a lot of sample code with `TweenMax` and when I read that I'm already turned of from reading further. 

 

I have an example working and feels like it this would be the GSAP 3.x way of doing it (found this also somewhere here)

 

But now I want to add decimal separators to make it easier to read, but here I'm at a loss. I see a lot `onUpdate` functions, which I also have used, but only when I had one number to animate,  but I can't find how to do this with a stagger. 

See the Pen jOMRwjG by mvaneijgen (@mvaneijgen) on CodePen.

[akapowl]

Hey @mvaneijgen

 

I don't know if you realized, but that function you have in the onUpdate in your pen doesn't work, even without the stagger.

 

I assume this is what you intended?

 

See the Pen b2c2c56064274fd14620faa9d5537e40 by akapowl (@akapowl) on CodePen.

 

 

A way to do this respecting the stagger is to create a stagger-object and put the onUpdate-function in that stagger-object, targetting each element to be staggered individually.

 

Hope this helps.

 

Cheers,

Paul

 

 

 

Just for reference, I'll link the old thread that helped me correct the function itself

 

 

 

[Carl]

Paul's solution above may be all you need and works great.

 

In B-sides, Bonuses, and Oddities I have a lesson (with 20 minute video) that shows how to build a re-usable counter effect that makes chaining these types of animations a breeze.

 

Here is the finished demo

 

See the Pen NWRqmOv?editors=0010 by snorkltv (@snorkltv) on CodePen.

 

Once the effect code is registered you can animate a counter with one line like

 

tl.counter("#studentsCount", {end:1860, increment:10})

the effect reads the current value in the target html item ("#studentsCount"), animates to the end value, and supports custom increments

 

Feel free to use this demo and effect as you see fit.

 

 

[mvaneijgen]

@akapowl yes I knew. I had commented it out, but wanted to show that I was aware of it. 

 

This it it! 

 

What needs to be inside the `stagger` and what would be outside the object is something that always tips me up.  Also what I have access to within the `onUpdate` functions with `this` is something I find perplexing , because if I would check the console.log I find the property `._targets`, but you are accessing it via a function `.targets(), how did you find, can I find it somewhere in the docs? 

 

@Carl thanks, I'll check it out. 

[akapowl]

6 minutes ago, mvaneijgen said:

how did you find, can I find it somewhere in the docs

 

Sure thing:

 

https://greensock.com/docs/v3/GSAP/Tween/targets()

 

You should also find it if you do a browser search in the general docs for a tween or use the sidepanel on the left for search