https://github.com/iceend/react-count-animation

:collision:Animation for change count,using React library.
https://github.com/iceend/react-count-animation

animation counter react

Last synced: 26 days ago
JSON representation

:collision:Animation for change count,using React library.

• Host: GitHub
• URL: https://github.com/iceend/react-count-animation
• Owner: IceEnd
• License: mit
• Created: 2016-09-03T11:21:39.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2018-01-24T02:45:55.000Z (over 7 years ago)
• Last Synced: 2025-05-02T14:47:52.211Z (about 1 month ago)
• Topics: animation, counter, react
• Language: JavaScript
• Homepage:
• Size: 196 KB
• Stars: 18
• Watchers: 2
• Forks: 3
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-count-animation

[![npm](https://img.shields.io/badge/npm-v1.1.3-brightgreen.svg)](https://www.npmjs.com/package/react-count-animation)

[![MIT License](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/IceEnd/icePlayer/blob/master/LICENSE)

Using TWEEN algorithm, digital animation based on react.

## Display

![display](http://obukb5fdy.bkt.clouddn.com/countanimation.gif)

## Install

```markdown

npm install react-count-animation@latest

```

## How to use

import stylesheet:

```js

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

```

```js

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 (

    


      
Count Animation

      


        

      

      
Count Roll

      


        

      

      
Count Slide

      


        

      

    

  );

}


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](https://github.com/IceEnd/react-count-animation/blob/master/LICENSE)