Search Community

# Gsap Scrolltrigger Counter

Moderator Tag

Go to solution Solved by akapowl,

## Recommended Posts

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

##### Share on other sites

• 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

• 2
##### Share on other sites

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

##### 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

• 3