🙌Our latest product Forest is now live! 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
CMS Lightbox
Oramsdesign
Guide
Count Up
Tom Bekkers
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.