GSAP Counter with Commas

[Tony Geek]

Hi all,

I've had a look around the forums to try and find out how to implement this solution. But it's not quite coming to me.

The issue is pretty simple on paper: Make a snap counter that uses commas. It can use decimals, so why not commas?
Well it's a bit tricker than it seems, and it doesn't look like there's anything in the docs about snapping that's relevant to my issue.

Let say for example, that I have "12,345" as my number. Now with textContent, this would just snap it to 12. Or if I just used the snap on it's own, it would reach 12,345 but there would be a bunch of decimals flying around during the transition on "12" and "345".

Is there any way I can just count up from 0 to 12,345 without having all the decimals around, whilst keeping all of the commas?

I have found other solutions across the board, however said solutions have since become outdated with GSAP, and therefore I can't use them anymore.

 

Thanks in advance!

See the Pen rNRNBVd by tonycre8-the-bold (@tonycre8-the-bold) on CodePen

[Carl]

perhaps running your value through this regular expression will help:

 

See the Pen KKEKPWX by snorkltv (@snorkltv) on CodePen

 

That demo is a simplified version of the following demo from my lesson on creating reusable GSAP effects

 

See the Pen NWRqmOv?editors=0010 by snorkltv (@snorkltv) on CodePen

 

If you need more help understanding what's going on check out my complete GSAP training.

 

You'll learn a ton of helpful tricks like this.

 

EDIT: if you need help with regular expressions, I recommend chatGPT 😃

[Tony Geek]

Okay nevermind!

I do have a tendency to post and then make the big discovery to solve my issues.
It was similar to some other solutions, the one that helped was this:

See the Pen jOKOMaZ by oscar-2283 (@oscar-2283) on CodePen

 

Thanks all for reading.

 

[Tony Geek]

1 minute ago, Carl said:

perhaps running your value through this regular expression will help:

 

 

 

 

That demo is a simplified version of the following demo from my lesson on creating reusable GSAP effects

 

 

 

 

If you need more help understanding what's going on check out my complete GSAP training.

 

You'll learn a ton of helpful tricks like this.

 

EDIT: if you need help with regular expressions, I recommend chatGPT 😃

Thanks for the reply! I have managed to figure this out, but I'm going to check out those tips regardless.

[Rodrigo]

Hi,

 

Just in case someone else comes across this thread, @akapowl one of our superstars posted a few useful resources in this thread as well:

 

Happy Tweening!

[GreenSock]

There's also a helper function that lets you define exactly how many decimal places you want, and it'll add the commas for you: 

https://gsap.com/docs/v3/HelperFunctions/helpers/formatNumber

 

I'm not sure why you were applying snapping and also a stagger that had no actual stagger value but just an onUpdate - I think this would be much cleaner: 

See the Pen JjzjXWx?editors=0010 by GreenSock (@GreenSock) on CodePen

 

And actually, I like @Carl's increment functionality, but I think it's important to allow padded decimal values so that things don't appear to get longer/shorter (often it's handy to force a certain number of decimal places and pad the extra spots with 0), so I whipped together this function that'll return a formatting function: 

function getFormatter(increment, pad) {
  let snap = gsap.utils.snap(increment),
      exp = /\B(?=(\d{3})+(?!\d))/g,
      snapWithCommas = value => (snap(+value) + "").replace(exp, ","),
      whole = increment % 1 === 0,
      decimals = whole ? 0 : ((increment + "").split(".")[1] || "0").length;
  return !pad || whole ? snapWithCommas : value => {
    let s = snapWithCommas(value),
        i = s.indexOf(".");
    ~i || (i = s.length);
    return s.substr(0, i) + "." + (s.substr(i + 1, s.length - i - 1) + "00000000").substr(0, decimals);
  };
}

Usage: 

let formatter = getFormatter(0.01, true); // increment by 0.01, always pad so that there are 2 decimal places

console.log(formatter(5000.1)); // 5,000.10

Here's a fork with that in place: 

See the Pen mdodEyW?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Have fun!

[PointC]

@GreenSock

Very fancy.

[Tony Geek]

How enlightening, thanks a lot for the responses. Definitely got a few new solutions I can try.