Count Up Number Animation

Simple
Count Up Number Animation

Want to apply a count up animation to a number in your project?

Easy, just copy this custom code to the </body> tag of the page you want to use it on, or to your project settings to make it work on every page.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.counterup/1.0/jquery.counterup.min.js'></script>
<script>
$('.counter').counterUp({
 delay: 10,
 time: 1000
});
$('.counter').addClass('animated fadeIn');
</script>

Once you've added this, all you need to do is add the 'counter' class to any number that you want to count up.

You can change the 'time' to edit how long it takes, and the 'delay', for how fast it goes through numbers.

This works for integers (452) and decimal numbers (23.43), but make sure you only apply this to a number and not to text. Therfor, if you want to do it to "4.2%", you'll want to only apply the class to the 4.2.

Download Assets
See an Example Website

Other Code Snippets

Learn How to Turn More Website Traffic into Customers in Just 5 Days

Trusted by hundreds of businesses around the world.

Nice! You're in the loop. Talk soon.
Oops! Something went wrong while submitting the form.