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

Share this post


Link to post
Share on other sites

Hello Barrett, and Welcome to the GreenSock Forum!

 

What about this:

 

http://codepen.io/jonathan/pen/PWBgGQ

 

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

Share this post


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

Share this post


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

 

http://codepen.io/jonathan/pen/vgzaPG

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

Share this post


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.

 

 

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):

 

 

Happy Tweening :)

  • Like 4

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


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.