In this Webflow tutorial, I'll be showing you how to create the counter up number animation in Webflow. This can be done in 30 seconds or less and I'll show you exactly how during this tutorial.
Here are the two steps needed to create the counter up number animation.
Step 1: Add the script below into the <body> section of your Webflow 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>
Step 2: Add an extra class to the text that you would like the animation on. This class is "counter".
Done, you have managed to create this animation in 2 simple steps.
If you enjoy these Webflow tutorials, don't forget to like and subscribe.