Animated Number Counter With Commas

Expression Code

val = effect("Slider Control")("Slider");
decimals = 2;
decimalSymbol = ",";
thousandsSeparator = " ";
prefix = "$";
suffix = "";

factor = Math.pow(10, decimals);
rounded = Math.round(val * factor) / factor;

parts = rounded.toFixed(decimals).split(".");
whole = parts[0];
decimal = parts[1];

formattedWhole = "";
for (i = 0; i < whole.length; i++) {
  if (i > 0 && (whole.length - i) % 3 == 0) {
    formattedWhole += thousandsSeparator;
  }
  formattedWhole += whole[i];
}

formatted = prefix + formattedWhole + decimalSymbol + decimal + suffix;
formatted;

Where to Apply

Paste this into the Source Text of any Text Layer that’s pick-whipped to an animated Slider. It’ll automatically format the value cleanly.

How It Works

// Pick the animated slider value
val = effect("Slider Control")("Slider");

// Set the number of decimal places to show
decimals = 2;  

// Choose the decimal symbol (can be dot or comma)
decimalSymbol = ",";     

// Set the thousands separator (space, dot, or leave empty for none)
thousandsSeparator = " "; 

// Set the prefix (like "$", "€", etc.)
prefix = "$";             

// Set the suffix (like "%", "€", etc.)
suffix = "";              

// Round the value based on the number of decimals
factor = Math.pow(10, decimals);
rounded = Math.round(val * factor) / factor;

// Split the rounded value into whole and decimal parts
parts = rounded.toFixed(decimals).split(".");
whole = parts[0];
decimal = parts[1];

// Add the thousands separator to the whole part
formattedWhole = "";
for (i = 0; i < whole.length; i++) {
  if (i > 0 && (whole.length - i) % 3 == 0) {
    formattedWhole += thousandsSeparator;
  }
  formattedWhole += whole[i];
}

// Combine the formatted whole part, decimal part, and symbols
formatted = prefix + formattedWhole + decimalSymbol + decimal + suffix;

// Output the formatted result
formatted;

Get the Slider Value:

val = effect("Slider Control")("Slider");

This grabs the value from a Slider Control (like a number counter) that you are animating in your After Effects project. This slider value will be what gets formatted and displayed in the text.

Set Decimal Precision:

decimals = 2;

This is where you define how many decimal places you want to display. You can adjust this value to 0, 1, 2, or more based on your needs. For example, 2 will display 12.34, 1 will display 12.3, and 0 will display 12.

Define Decimal Symbol:

decimalSymbol = ",";

This sets the decimal symbol for the number. If you want a comma (,), you’ll use it here, but you can also use a period (.) depending on the format you prefer (for example, 12.34 or 12,34).

Set Thousands Separator:

thousandsSeparator = " ";

This is where you define how to separate large numbers (thousands). You can use a space (" "), a dot ("."), or leave it empty ("") if you don't want any separator. For instance, you can have 1 000 000 or 1.000.000.

Define Prefix and Suffix:

prefix = "$";
suffix = "";

You can set a prefix (such as "$", "€", or any symbol) and a suffix (like "%", "€", etc.) that will appear before or after the number, respectively. For example, you might use "$" to display prices like $100 or "%" for percentages.

Rounding the Value:

factor = Math.pow(10, decimals);
rounded = Math.round(val * factor) / factor;

This is the rounding logic. It works by:

• Multiplying the original value by 10 raised to the number of decimal places (Math.pow(10, decimals)).

• Rounding the result to the nearest integer (Math.round()).

• Then, dividing it by 10 to shift the decimal back to the correct position.

Splitting the Number into Whole and Decimal Parts:

parts = rounded.toFixed(decimals).split(".");
whole = parts[0];
decimal = parts[1];

After rounding, the number is converted into a string with the desired decimal places (toFixed(decimals)).

The number is split into two parts: the whole part (before the decimal point) and the decimal part (after the decimal point).

Adding Thousands Separator to the Whole Part:

formattedWhole = "";
for (i = 0; i < whole.length; i++) {
  if (i > 0 && (whole.length - i) % 3 == 0) {
    formattedWhole += thousandsSeparator;
  }
  formattedWhole += whole[i];
}

This part is where we format the whole number by adding the thousands separator. It loops through the whole part (before the decimal point) and adds a separator every 3 digits (e.g., 1,000, 1 000, 1.000, etc.).

Combining Everything:

formatted = prefix + formattedWhole + decimalSymbol + decimal + suffix;

Finally, it combines:

• The prefix (like $)

• The formatted whole number (with thousands separators)

• The decimal symbol (comma or dot)

• The decimal part

• The suffix (like %)

Output the Formatted Value:

formatted;

The formatted value is outputted, which you will see in the Source Text of the text layer.