Incremental Number Counter – After Effects
If you’re animating a number counter but want the numbers to go up in a certain increment, there’s an expression for that!
First, create a text layer, add a slider control, and make an expression for your layer’s source text to use the slider control value. Make it a variable.
num = effect(“Slider Control”)(“Slider”);
Next, we’ll use Math.round to help us move up in increments. For example, if we want to move up in increments of 500, then we can use this expression:
Math.round(num/500)*500);
This will round our slider value to the nearest 500. So, when the slider value hits 250, 500 will display on screen.
When the slider value hits 750, 1000 will display on screen.
If you want to add a comma into your numbers where relevant (for example, 1,000 instead of 1000), add a function that places the comma in the string. Then, add in the Math.round expression for what the function returns. The entire expression would be:
num = effect(“Slider Control”)(“Slider”);
function addCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, “,”);
}
addCommas(Math.round(num/500)*500);
To enhance this further, add a unit of measure. For example, if you want to measure RPMs, append + “ RPM” to the last line of your expression. Align your text as needed.
num=effect(“Slider Control”)(“Slider”);
function addCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, “,”);
}
addCommas(Math.round(num/500)*500) + ” RPM”;
This expression will help you easily animated numbers in increments. Enjoy!
Watch a quick video tutorial on this:https://youtu.be/O0xXmnxEgSQ
###
Enjoying this tutorial? Sign up now for the Creative COW Newsletter!
Sign up for the Creative COW newsletter and get weekly updates on industry news, forum highlights, inspirational tutorials, tips, burning questions, and more! Receive bulletins from the largest, longest-running community dedicated to supporting professionals working in film, video, and audio.
Enter your email address, a first and last name, and let us know what you’d like to see more of in the message!
[contact-form-block name_label=”Name” email_label=”E-mail” message_label=”Message” header=”false” header_image_id=”null” header_image_size=”50″ header_image_align=”left” header_title=”Get in Touch” header_text=”Leave your message and we’ll get back to you shortly.” button_text=”Send” button_color=”#3d84f6″ button_text_color=”white” align=”undefined” theme=”default” message_rows=”5″][/contact-form-block]
Responses