Counter with Separator Decimal Point or Comma

[Barrett 3 Likes (Newbie)]

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

[Jonathan 5,176 Likes (Superhero)]

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

 

[Barrett 3 Likes (Newbie)]

Hi Jonathan,

 

Thank you for your reply. It has work perfectly.

What would I need to change to remove the 2 decimal places.

 

Thanks

Barrett

[Jonathan 5,176 Likes (Superhero)]

Try this then for no 2 decimal places

 

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

 

or this:

 

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

 

[Barrett 3 Likes (Newbie)]

That's great thanks Jonathan.

[Whitby 2 Likes (Newbie)]

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

[Jonathan 5,176 Likes (Superhero)]

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

[Whitby 2 Likes (Newbie)]

Wow @Jonathan, thank you for such a fast reply!  This works perfectly!