Our shop section is coming soon, watch for updates! Shop now
Guide

Count Up

Simple Count Up Interaction
January 5, 2019

Original pen from Sean Whelan view-able here

Step One

‍Add the following code into the header section of your page custom code.

<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>

Step Two

Add the following code into the before body section of your custom code

<script>

   $('.counter').counterUp({

       delay: 10,

       time: 2000

   });

   $('.counter').addClass('animated fadeInDownBig');

   $('h3').addClass('animated fadeIn');

</script>

Step Three

Add the class 'counter' to your text fields and you're done.


Tom Bekkers
Details
Count Up
Simple Count Up Interaction
Preview ProjectClone Project

Discussion

Other Guides

Guide
Interactions & fullPage JS
John Marsh
Guide
Typed.JS
Noah
News, Updates & Clonables

Join the newsletter for updates

Join 600+ webflow community members.
Welcome to the club. Cool stuff coming your way.
Oops! Something went wrong while submitting the form.