Jump to content
Search Community

Counter with Separator Decimal Point or Comma

Barrett test
Moderator Tag

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

 

I am new to the GreenSock forum and would greatly appreciate some insight and help. I have found some great posts with useful answers concerning 'Counters' however none with a separator. I apologise if I have missed one or if this post is in the wrong place.

 

I'm trying to add a comma to the below code to give the 'thousands' a decimal place eg 2,100.

 


var counter = { var: 0 };
var tal = document.getElementById("tal");
    
 TweenMax.to(counter, 5, {
      var: 2100, 
      onUpdate: function () {
          tal.innerHTML = Math.ceil(counter.var);
      },
      ease:Circ.easeOut
  });

 

In the past I have used countUp.js to achieve this. But was wondering if TweenMax has a simple way to execute with out adding an additional js file.

 

Any help would be appreciated.

Thanks

Barrett

See the Pen KCwhx by nicolund (@nicolund) on CodePen

Link to comment
Share on other sites

Hello Barrett, and Welcome to the GreenSock Forum!

 

What about this:

 

See the Pen PWBgGQ by jonathan (@jonathan) on CodePen

 

It accounts for thousandths comma and only allowing 2 decimal places. Whats good about the function used is it is converted from php, since javascript has known bugs for formatting numbers and rounding floats inconsistently ;)

 

Resource:

http://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript

 

:)

  • Like 3
Link to comment
Share on other sites

  • 1 year later...
On 2/8/2017 at 1:16 PM, Jonathan said:

Try this then for no 2 decimal places

 

See the Pen vgzaPG by jonathan (@jonathan) on CodePen

Hi there!  This is great for a project i'm currently working on.  However I have 4 different counters on the same page.. How could I amend the script so that it can accommodate 4 separate counters?

 

Thank you

Screenshot 2019-01-08 at 15.45.58.png

Link to comment
Share on other sites

Hi @Whitby and Welcome to the GreenSock Forum!

 

To do this you need to have the to() tween in a for loop and use let instead of var so you can iterate DOM elements in the loop properly.

 

See the Pen VqdJVj by jonathan (@jonathan) on CodePen

 

function numberWithCommas(n) {
    var parts=n.toString().split(".");
    return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

var endingCounterVar = [2100, 1000, 1500, 1800];

for (let i = 0; i <= 3; i++) {

  let counter = { var: 0 };
  let tal = document.getElementById("tal-"+i);
    
  TweenMax.to(counter, 5, {
      var: endingCounterVar[i], 
      onUpdate: function () {
          let nwc = numberWithCommas(counter.var);
          tal.innerHTML = nwc;
      },
      ease:Circ.easeOut
  });

}

 

Differences between using Javascript let vs var in the below codepen example (better to view on codepen with console to see output):

 

See the Pen Ogeovq by jonathan (@jonathan) on CodePen

 

Happy Tweening :)

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