Gsap Scrolltrigger Counter

[Sukru]

Hello, I have such a part in my project, when I put a period and a comma between numbers like "1,000,000" or "4,000", the counter doesn't work. Can you help me?

 

See the Pen jOQZbzJ by sukruemanet (@sukruemanet) on CodePen

[akapowl]

 

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.

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join

 

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

 

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

 

https://stackoverflow.com/questions/27761543/how-do-i-display-large-numbers-with-commas-html

 

[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

 

 

 

 

 

 

 

[Sukru]

@akapowl thank you veryc much. worked great for me so would "1.000,000" be a combination of dots and commas?

[akapowl]

 

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