19th Apr 2019

Learn how to do Animation on Counter by Scrolling in both directions


Written By, Priya Patel


We have a requirement in one of our projects to have counters that should be animated when it is within the viewport as well as on scroll in both directions. As we all know that the simplest way is to go to Google and search for some script that makes our job easy, we also did the same but we were unable to search for the same. Now, we don’t have any other option rather than generating it on our own.


To initialize, we looked up for the script that help us to know that the particular element is within the viewport(user’s visible area of the site) and we succeeded in finding the one i.e Waypoints Inview. We have used that to implement this counters. Most primary requirement for this jquery library. You can download waypoints scripts from here.



1) Implement the script for counter

Mostly we begin the easiest task that we are able to sail through. So we begin with script for the counter increment.



2) Implement waypoints

To begin with waypoints, we need to include scripts as stated in prerequisite. Then we created a function for it and initialized that function on load of the page.

3) Result

You can download the source code from here. The final result is as below.



I hope that this blog might be useful to you. I have implemented this with the help of my colleagues Richa and Amitsinh.

Written By,

Web Designer at Yudiz Solutions Pvt. Ltd