1.0.2 • Published 1 year ago

scrolling-animated-counter v1.0.2

Weekly downloads
-
License
ISC
Repository
github
Last release
1 year ago

Scrolling Animated Counter

GitHub

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

NameTypeDescription
initialValuenumber (optional)The initial value of the counter. Defaults to 0.
targetValuenumber (required)The target value to which the counter should animate.
durationnumber (optional)The duration in milliseconds for the counter animation. Defaults to 2000 milliseconds.
thresholdnumber (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.
classNamestring (optional)CSS class name to be applied to the span element wrapping the counter.