Responsive Number Counting Animation Using React JS

In this article, we will create a responsive number counting animation using ReactJS. The application will show a number of statistics and each number will be animated as it goes up to the point value. Such a format of animation is often applied for interactive data within sites, for example, to demonstrate the number of customers, sales, statistics and so on.

Preview of Final Output:

Prerequisite

• ReactJS
• CSS
• React Hooks
• JavaScript

Approach:

• The CountUpAnimation component accepts props such as an icon, initial value, final value, and text.
• It sets up the useEffect for animations, determining the exact duration required to reach the target value in four seconds.
• Within the useEffect, a counter is created using setInterval, incrementing the count by one at each interval and updating the state with setCount until the target is reached.
• The component displays a container containing an icon, an animated number, and text.
• In the parent component, App, multiple instances of CountUpAnimation are used to showcase diverse statistics.
• Each instance is customized with unique icons, values, and text within a wrapper.

Steps to Create the Project:

Step 1: Create a react application by using this command

npx create-react-app CountUpAnimation

Step 2: After creating your project folder, i.e. CountUpAnimation, use the following command to navigate to it:

cd CountUpAnimation

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: Below is the implementation of the above approach.

/* App.css */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

h2 {
  text-align: center;
  margin-bottom: 40px;
  color: green;
}

.wrapper {
  display: flex;
  justify-content: space-around;
  gap: 15px;
}

.container {
  width: 28vmin;
  height: 28vmin;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 1em 0;
  position: relative;
  background-color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  text-align: center;
  transition: transform 0.3s ease-in-out;
}

.container:hover {
  transform: scale(1.05);
}

.icon {
  color: red;
  font-size: 2.5em;
  text-align: center;
}

span.num {
  color: red;
  font-weight: 600;
  font-size: 2.5em;
}

span.text {
  color: #333;
  font-size: 1.2em;
  padding: 0.7em 0;
  font-weight: 600;
  text-transform: uppercase;
}

@media screen and (max-width: 1024px) {
  .wrapper {
    width: 90vw;
    flex-wrap: wrap;
    gap: 20px;
  }

  .container {
    width: calc(33.33% - 20px);
    height: 350px;
    font-size: 1.4em;
  }
}

@media screen and (max-width: 768px) {
  .wrapper {
    width: 90vw;
    flex-wrap: wrap;
    gap: 20px;
  }

  .container {
    width: calc(50% - 20px);
    height: 350px;
    font-size: 1.6em;
  }
}

@media screen and (max-width: 480px) {
  .wrapper {
    gap: 15px;
  }

  .container {
    width: 100%;
    height: 350px;
    font-size: 1.4em;
  }
}

// App.js

import React, {
	useEffect,
	useState
}
	from 'react';
import './App.css';
import {
	FaUtensils,
	FaSmileBeam,
	FaList,
	FaStar
}
	from 'react-icons/fa';

const CountUpAnimation = ({
	iconComponent,
	initialValue,
	targetValue,
	text,
}) => {
	const [count, setCount] = useState(initialValue);
	const duration = 4000; // 4 seconds

	useEffect(() => {
		let startValue = initialValue;
		const interval = Math.floor(
			duration / (targetValue - initialValue));

		const counter = setInterval(() => {
			startValue += 1;
			setCount(startValue);
			if (startValue >= targetValue) {
				clearInterval(counter);
			}
		}, interval);

		return () => {
			clearInterval(counter);
		};
	}, [targetValue, initialValue]);

	return (
		<div className="container">
			<div className="icon">{iconComponent}</div>
			<span className="num">{count}</span>
			<span className="text">{text}</span>
		</div>
	);
};

function App() {
	return (
		<div>
			<h2>
				Responsive Number Counting
				Animation - Geeksforgeeks
			</h2>
			<div className="wrapper">
				<CountUpAnimation
					iconComponent={<FaUtensils />}
					initialValue={0}
					targetValue={150}
					text="Meals Delivered"
				/>
				<CountUpAnimation
					iconComponent={<FaSmileBeam />}
					initialValue={0}
					targetValue={200}
					text="Happy Customers"
				/>
				<CountUpAnimation
					iconComponent={<FaList />}
					initialValue={0}
					targetValue={250}
					text="Menu Items"
				/>
				<CountUpAnimation
					iconComponent={<FaStar />}
					initialValue={0}
					targetValue={300}
					text="Five Stars"
				/>
			</div>
		</div>
	);
}

export default App;

Step 4: Type the following command in the terminal:

npm start

Step 5: Type the following URL in the browser:

 http://localhost:3000/

Output: