Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Barrett

Counter with Separator Decimal Point or Comma

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 post
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 post
Share on other sites

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

Link to post
Share on other sites
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 post
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 post
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.

×