Tony Geek Posted December 21, 2023 Share Posted December 21, 2023 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 Link to comment Share on other sites More sharing options...
Carl Posted December 21, 2023 Share Posted December 21, 2023 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 😃 3 Link to comment Share on other sites More sharing options...
Solution Tony Geek Posted December 21, 2023 Author Solution Share Posted December 21, 2023 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. Link to comment Share on other sites More sharing options...
Tony Geek Posted December 21, 2023 Author Share Posted December 21, 2023 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted December 21, 2023 Share Posted December 21, 2023 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! Link to comment Share on other sites More sharing options...
GreenSock Posted December 21, 2023 Share Posted December 21, 2023 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! 2 Link to comment Share on other sites More sharing options...
PointC Posted December 21, 2023 Share Posted December 21, 2023 @GreenSock Very fancy. 1 Link to comment Share on other sites More sharing options...
Tony Geek Posted December 22, 2023 Author Share Posted December 22, 2023 How enlightening, thanks a lot for the responses. Definitely got a few new solutions I can try. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now