react-count-animation

Using TWEEN algorithm, digital animation based on react.

Display

Install

npm install react-count-animation@latest

How to use

import stylesheet:

import 'react-count-animation/dist/count.min.css';

import React from 'react';
import ReactDOM from 'react-dom';
import AnimationCount from 'react-count-animation';

const Count = () => {
  const settings = {
    start: 99923,
    count: 9999999,
    duration: 3000,
    decimals: 4,
    useGroup: true,
    animation: 'up',
  };
  const settings2 = {
    start: 1,
    count: 9999999,
    duration: 1000,
    decimals: 2,
    useGroup: true,
    animation: 'roll',
  };
  const settings3 = {
    start: 1,
    count: 9999999,
    duration: 3000,
    decimals: 2,
    useGroup: true,
    animation: 'slide',
  };
  return (
    <div>
      <h1 className="title">Count Animation</h1>
      <div className="exam-div">
        <AnimationCount {...settings}/>
      </div>
      <h1 className="title">Count Roll</h1>
      <div className="exam-div">
        <AnimationCount {...settings2}/>
      </div>
      <h1 className="title">Count Slide</h1>
      <div className="exam-div">
        <AnimationCount {...settings3} />
      </div>
    </div>
  );
}

export default Count;

Options

Property | Type | Description ------------- | ------------- | ------------- start | Number | Initial value count | Number | target value duration | Number | Animation time length, in milliseconds decimals | Number | decimals useGroup | bool | Whether to use ',' the number of segments animation | string | Animation effects: 'up' => 'CountUp';'roll' => 'CountRoll''slide' => 'CountSlide'

License

MIT