Jump to content
Search Community

Gsap Scrolltrigger Counter

Sukru test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

  • Solution


Hello Sukru,


This looks like it is mainly logic related.


If you were to console.log() out your values, you would see, that when you feed in a big value that is delimited by commas in your data-number attribute it will return as a string and not a number.

So you will want to find a way to convert that string into a tweenable number first and then later you will want to find a way to convert it back to a string delimited by commas.

In the example below I split the initial string by commas and joined it without seperator, to run a parseInt() on that string, so I get a number value to tween on.








To later convedrt it back into the comma-delimited string format I use a function I found on StackOverflow.




[As an alternative to the latter you could also use .toLocaleString() or some other method suggested in the threads linked at the bottom of this post.] [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString]



Note: This example is now set up to work only with that comma delimited number element.

I leave converting the logic to work for all your elements up to you. I hope this will help.


See the Pen KKrQdjP by akapowl (@akapowl) on CodePen








  • Like 2
Link to comment
Share on other sites


Have a look at the posts I linked to above.

The very first of those provides some logic for you to mix those as you like.

Here, in comparison to the example provided in there, I just swapped the characters of the variables dec_point and thousands_sep to use.

See the Pen VwVQeOR by akapowl (@akapowl) on CodePen

  • Like 3
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...