Jump to content
Search Community

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

mvaneijgen test
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

  • Like 1
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 7
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 9
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.
  • Create New...