Scrolling Animated Counter

A simple React component for creating smooth animated counters that start counting when they become visible on the screen or when they enter the scroll view position.

Demo

Check out simple demo here.

Installation

You can install the scrolling-animated-counter package via npm:

npm install scrolling-animated-counter

Or, if you're using Yarn:

yarn add scrolling-animated-counter

Usage

import React from "react";
import { ScrollingAnimatedCounter } from "scrolling-animated-counter";

const App = () => {
  return (
    <div>
      <h1>Welcome to My Website!</h1>
      <p>
        Here's the scrolling animated counter:
        <ScrollingAnimatedCounter targetValue={100} threshold={0.5} />
      </p>
    </div>
  );
};

export default App;

Props

Name	Type	Description
initialValue	number (optional)	The initial value of the counter. Defaults to 0.
targetValue	number (required)	The target value to which the counter should animate.
duration	number (optional)	The duration in milliseconds for the counter animation. Defaults to 2000 milliseconds.
threshold	number (optional)	The ratio of the target element's visibility in the viewport at which the Intersection Observer triggers the animation. It should be a value between 0 and 1. Defaults to 0.5.
className	string (optional)	CSS class name to be applied to the span element wrapping the counter.