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.

‍