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

Overview

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.

Prerequisite

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.

counter-image1

Implementation

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.

HTML:

Script:

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.

animated-counter

Conclusion

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

mm

Priya Patel Web Designer

I am a Web Designer at Yudiz Solutions Pvt. Ltd - a leading Web and Mobile Apps development company. In my free time I learn new things about latest web design tools and techniques.

Comments are closed.

Top