Creative Communities of the World Forums

The peer to peer support community for media production professionals.

Forums Adobe After Effects Expressions Number counter with comma

  • Number counter with comma

  • Adam Zygadlo

    September 7, 2016 at 9:48 am

    Good morning everyone,

    I wonder if anyone can help out with this issue. At present, I have built a number counter that builds up from 0 to 150k. I sent the animation to the client for review and they came back with a feedback, where they want to place a comma in the number like 34,843.

    The way I built the project so far was using the text layer and link the source settings to a slide control to animate the numbers using this expression:

    n = comp(“LINK TO SLIDER”);
    d = 1;
    Math.round(n*d)/d;

    Is there a way to update this expression, where the numbers has the comma within the text? (23,289, 56,239, 100,000)

    Thank you in advance,

    Addz

    n = comp("LINK TO SLIDER");
    d = 1;
    Math.round(n*d)/d;

    Adam Jozef Zygadlo
    Motion Graphic Designer

    07708 124 915
    http://www.jarbrain.com
    ‘Filled with brainy goodness.’

  • Adam Zygadlo

    September 7, 2016 at 10:34 am

    Alright, I spent some time browsing on this forum, find a great expressions from Dan Ebberts (https://forums.creativecow.net/readpost/227/16453) which that did the trick.

    n = 0+comp(“LINK TO SLIDER”);
    s = “” + n;
    str = s.substr(-s.length, (s.length-1)%3 +1);
    for (i = Math.floor((s.length-1)/3); i > 0; i–){
    str += “,” + s.substr(-i*3,3);
    }
    str

    However, it has now caused another problem where the numbers goes all werid like ‘9,234,6.6,875’. Ideally, it would be great to round up the number to 91,607. :^)

    Adam Jozef Zygadlo
    Motion Graphic Designer

    07708 124 915
    http://www.jarbrain.com
    ‘Filled with brainy goodness.’

  • Adam Zygadlo

    September 7, 2016 at 11:14 am

    Awesome, I have solved the original problem as well as the new issue when introducing new expressions.

    Basically, I added another slider control between the text layer to the main slider to round up the number. Here’s a breakdown to the expressions, etc.

    Text Layer: Source

    n = 0+effect(“Slider Control”)(“Slider”);
    s = “” + n;
    str = s.substr(-s.length, (s.length-1)%3 +1);
    for (i = Math.floor((s.length-1)/3); i > 0; i–){
    str += “,” + s.substr(-i*3,3);
    }
    str

    The code above links to the new slider, which is applied to the text layer:

    n = comp(“LINK TO MAIN SLIDER”);
    d = 1;
    Math.round(n*d)/d;

    I am pretty sure there’s a simpler way to get this expression but I am happy that I have solved it myself. :^D

    Thank you!
    Addz

    Adam Jozef Zygadlo
    Motion Graphic Designer

    07708 124 915
    http://www.jarbrain.com
    ‘Filled with brainy goodness.’

  • Kalleheikki Kannisto

    September 7, 2016 at 1:07 pm

    Perfectly valid solution. Yes, you could do it without the intermediate slider, but hey, where’s the fun in that?

    Kalleheikki Kannisto
    Senior Graphic Designer

  • Dan Ebberts

    September 7, 2016 at 1:09 pm

    Try this:

    n = comp(“LINK TO SLIDER”);
    Math.round(n).toString().replace(/\B(?=(\d{3})+(?!\d))/g, “,”);

    Dan

  • Adam Zygadlo

    September 7, 2016 at 2:25 pm

    Thank you Dan. The expression looks so much cleaner. Defo will save this line of code for future projects but I’ll stick to my version for now. ;^)

    Thanks again to everyone!

    Cheer,
    Addz

    Adam Jozef Zygadlo
    Motion Graphic Designer

    07708 124 915
    http://www.jarbrain.com
    ‘Filled with brainy goodness.’

  • Liran Tabib

    May 10, 2018 at 6:57 am

    If you wish to skip the expression method, you can also use Counter Preset to create any Counter and running numbers animation, with all kinds of Dividers (, . ‘ etc.). I hope you will find it useful. you can get it here:
    https://www.vdodna.com/products/counter-preset/

    Cheers!

    Liran Tabib
    http://www.vdodna.com

  • Tom Davis

    July 19, 2021 at 9:15 am

    With the new Javascript engine in AE you can now do the following:

    First add an angle control to your text layer, then add the following expression to your sourcetext value:

    var num = parseFloat(effect("Angle Control")("Angle")); num.toLocaleString("en-GB");

    The .toLocaleString option also comes with some other options like percentage signs and different separators depending on the parameters you pass to the function. If you’re interested, I wrote more about these different features in this blog on creating a number counter with commas


Viewing 1 - 8 of 8 posts

Log in to reply.

We use anonymous cookies to give you the best experience we can.
Our Privacy policy | GDPR Policy