Jump to content


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

Moderator Tag
Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.







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




  • Like 6
Link to comment
Share on other sites

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.



  • Like 7
Link to comment
Share on other sites

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

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.