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 the Secrets to Supercharge Your Webflow Website

The newsletter with 0% spam, and 110% good tips and tricks.

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