article
Photo by Kaboompics .com from Pexels

Implementing Counter Animation in React

article
Azeezat Raheem
20th August 2019

TL;DR

Counter animation was implemented using a for loop.

Packages can be of great help but overuse should be avoided. For one obvious reason — Maintainability. The more packages you use, the more difficult it is to maintain your code base. A package update could be a huge disaster. Like I always say, If you can write the logic, you do not need a package.
Some days ago, I needed to create a counter animation effect on a website. The product owner wanted a portion of the page which had statistics to appear as if it is counting the database records in real-time. I came across so many packages that could do this. But I just wanted to do it without using a package.
After a while, something occurred to me; A for loop that starts counting from 0 and ends at the length of items that is pulled from the API. View the full code below.

Popular Articles

article
8 online tools that can speed up your CSS delivery
article
Implementing Counter Animation in React
article
Using SonarQube and Jenkins for Unit Test Coverage Reporting
article
The journey to Coding