ADOBE AFTER EFFECTS: Forum Expressions Tutorials Creative Cloud

# Technique for Animated Number Countdown with Commas

FAQ   •   VIEW ALL
 Technique for Animated Number Countdown with Commas on Feb 9, 2012 at 12:04:14 am

Hi All,

Ran into this issue and combined like two techniques to get a really easy solution - thought I'd share it.

To get a number to countdown (from say 256,000 to 152,000 with commas, no decimal) follow these steps. (I didn't write most of the expression, got it from a website)

1. Create an empty text layer.

2. Go to Effects -> Expression Controls -> Slider Control

3. Twirl Down the Text Layer and 'alt (option on mac) + click' Text Source to open expression editor.

4. Enter the expression below.

5. Use the slider control effect to animate number. Enter the actual value instead of using the slider for numbers larger than one hundred. Simply key frame the effect and use the character editor to format the text. (Goes as high as 1,000,000)

Expression:

var num = effect("Slider Control")("Slider")
num = Comma(num);
[num]

function Comma(number)
{
number = '' + Math.round(number);
if (number.length > 3)
{
var mod = number.length % 3;
var output = (mod > 0 ? (number.substring(0,mod)) : '');
for (i=0 ; i < Math.floor(number.length / 3); i++)
{
if ((mod == 0) && (i == 0))
output += number.substring(mod+ 3 * i, mod + 3 * i + 3);
else
output+= ',' + number.substring(mod + 3 * i, mod + 3 * i + 3);
}
return (output);
}
else return number;
}

 Re: Technique for Animated Number Countdown with Commason Feb 9, 2012 at 1:14:17 am

Very nice, saved to useful expressions folder.

Johnny Cuevas, Editor
Thinkck.com

"I have not failed 700 times. I have succeeded in proving that those 700 ways will not work. When I have eliminated the ways that will not work, I will find the way that will work."
---THOMAS EDISON on inventing the light bulb.

 Re: Technique for Animated Number Countdown with Commason Feb 9, 2012 at 6:31:27 pm

Thanks for sharing Randy.

Cheers
RoRK

Intensive AE & Mocha Training in Singapore and Malaysia
Adobe ACE/ACI (version 7) & Imagineer Systems Inc Approved Mocha Trainer

 Re: Technique for Animated Number Countdown with Commason Jun 10, 2012 at 7:49:27 pm

Thanks! This share helped me a lot!

 Re: Technique for Animated Number Countdown with Commason Jun 27, 2012 at 4:56:09 pm

Is there a way to do 1,000,000+ ? I need a population counter....

 Re: Technique for Animated Number Countdown with Commason Nov 24, 2015 at 5:49:44 am

var num = effect("Slider Control")("Slider")*10
num = Comma(num);
[num]

function Comma(number)
{
number = '' + Math.round(number);
if (number.length > 3)
{
var mod = number.length % 3;
var output = (mod > 0 ? (number.substring(0,mod)) : '');
for (i=0 ; i < Math.floor(number.length / 3); i++)
{
if ((mod == 0) && (i == 0))
output += number.substring(mod+ 3 * i, mod + 3 * i + 3);
else
output+= ',' + number.substring(mod + 3 * i, mod + 3 * i + 3);
}
return (output);
}
else return number;
}

 Re: Technique for Animated Number Countdown with Commason Apr 24, 2017 at 8:00:55 am

New response to old post, this helped me a lot with a project I am working on. However, I used point control instead of slider to overcome the arbitrary 1,000,000 limit.

The expression was (including commas):

var num = effect("Point Control")("Point")[0]

num = Comma(num);
[num]

function Comma(number)
{
number = '' + Math.round(number);
if (number.length > 3)
{
var mod = number.length % 3;
var output = (mod > 0 ? (number.substring(0,mod)) : '');
for (i=0 ; i < Math.floor(number.length / 3); i++)
{
if ((mod == 0) && (i == 0))
output += number.substring(mod+ 3 * i, mod + 3 * i + 3);
else
output+= ',' + number.substring(mod + 3 * i, mod + 3 * i + 3);
}
return (output);
}
else return number;
}

 Re: Technique for Animated Number Countdown with Commason Jun 20, 2017 at 2:12:52 pm

Hi David,

This expression is extremely helpful for what I need in my project. I just had 1 question, how do I go about including a £ or \$ symbol at the beginning of the number as it counts up?

Thanks

 Re: Technique for Animated Number Countdown with Commason Jun 20, 2017 at 6:22:32 pm

Hi Jameel,

You can add it to the num variable like so:

var num = effect("Point Control")("Point")[0]

num = "\$" + Comma(num);
[num]

function Comma(number)
{
number = '' + Math.round(number);
if (number.length > 3)
{
var mod = number.length % 3;
var output = (mod > 0 ? (number.substring(0,mod)) : '');
for (i=0 ; i < Math.floor(number.length / 3); i++)
{
if ((mod == 0) && (i == 0))
output += number.substring(mod+ 3 * i, mod + 3 * i + 3);
else
output+= ',' + number.substring(mod + 3 * i, mod + 3 * i + 3);
}
return (output);
}
else return number;
}

 Re: Technique for Animated Number Countdown with Commason Mar 20, 2013 at 4:59:12 pm

my problem is the same as someone else posted; need to show a population countup from 0 or 100,000 to over 1 billion or over.

 Re: Technique for Animated Number Countdown with Commason Jul 15, 2013 at 9:30:24 pm

This is probably too late but I just saw this post now, to go over a million, just multiply the slider value in the first line of the expression like so-

var num = effect("Slider Control")("Slider") * 100 (or whatever number you want)

 Re: Technique for Animated Number Countdown with Commason Apr 17, 2015 at 2:18:50 am

Thank you for a simple and lean solution. Brilliant!

Arvid Eriksson
http://www.arvideriksson.com/

 Re: Technique for Animated Number Countdown with Commason Apr 30, 2014 at 6:02:02 pm

This is very useful, thanks for sharing!
In Italy we use commas instead of dots, so I would need to place the comma only before the last (or last two) digit.
I tried this way

var num = effect("Slider Control")("Slider")
num = Comma(num);
[num]

function Comma(number)
{
number = '' + Math.round(number);
if (number.length > 2)
{
var mod = number.length % 1;
var output = (mod > 0 ? (number.substring(0,mod)) : '');
for (i=0 ; i < Math.floor(number.length / 1); i++)
{
if ((mod == 0) & (i == 0))
output += number.substring(mod+ 1 * i, mod + 1 * i + 1);
else
output+= ',' + number.substring(mod + 1 * i, mod + 1 * i + 1);
}
return (output);
}
else return number;
}

but I get a comma after every digit.
Any idea?
Thank you!

 Re: Technique for Animated Number Countdown with Commason Sep 28, 2015 at 11:04:45 am

Hi,

This expression actually adds a least 10 numbers behind the comma. How to avoid that?

Best, Stig

 Re: Technique for Animated Number Countdown with Commason Apr 22, 2016 at 7:12:31 am

you can use a different approach and create the animation with the counter preset: http://www.vdodna.com/products/counter-preset/

 Re: Technique for Animated Number Countdown with Commason Nov 26, 2015 at 12:07:03 pm

And if you would like to count over 1,000,000 and keep the comma's in:

startCount = 0;
endCount = 48000000;
countDur = 3;

var num = Math.round(linear(time,0,countDur,startCount,endCount))
num = Comma(num);
[num]

function Comma(number)
{
number = '' + Math.round(number);
if (number.length > 3)
{
var mod = number.length % 3;
var output = (mod > 0 ? (number.substring(0,mod)) : '');
for (i=0 ; i < Math.floor(number.length / 3); i++)
{
if ((mod == 0) && (i == 0))
output += number.substring(mod+ 3 * i, mod + 3 * i + 3);
else
output+= ',' + number.substring(mod + 3 * i, mod + 3 * i + 3);
}
return (output);
}
else return number;
}

 Re: Technique for Animated Number Countdown with Commason Nov 28, 2017 at 8:43:36 pm

Can you do this and have 2 decimal places after it too?

 Re: Technique for Animated Number Countdown with Commason Oct 30, 2018 at 4:54:43 pm

Exactly what I needed. Worked perfect. Thank you!!

Erik Waluska
EAWmedia

 Re: Technique for Animated Number Countdown with Commason Nov 6, 2018 at 12:19:06 pm

Hi, for some reason this code (or any other similar to this one) doesn't work with Adobe After Effects CC 2019. Do you have any idea why is that? Thank you

 Re: Technique for Animated Number Countdown with Commason Mar 8, 2019 at 11:46:21 am

In CC2019 first go to: File • Project Settings • Expressions ; set it to Legacy ExtendScript﻿