Return to articles
How to add a count up animation in webflow
Tutorials

How to add a count up animation in webflow

Learn how to add a count up interaction in webflow. Works when scrolled into view

Flowbase
January 5, 2019

Original pen from Sean Whelan view-able here

1. Add scripts to custom code settings

Add the following code into the before body section of your 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>
<script></script>
  $('.counter').counterUp({
      delay: 10,
      time: 2000
  });
  $('.counter').addClass('animated fadeInDownBig');
  $('h3').addClass('animated fadeIn');

2. Add the class counter to text fields

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


ABOUT THE AUTHOR
Flowbase

Flowbase is the leading company for Webflow resources. We provide customers a collection of premium and free resources that help them build better products with Webflow.

Enjoyed this read?

Stay up to date with the latest video business news, strategies, and insights sent straight to your inbox!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Recieve webflow resources directly to your mailbox.

Sign up to get weekly insights & inspiration in your inbox.

OTHER GUIDES & LESSONS

Boost your webflow site further.