Flip Numbers In 3D Space – react-flip-numbers

Category: Animation
Author: bluebill1049
Views Total: 19
Official Page: Go to website
License: MIT

A fancy React animation library to flip numbers in 3D space.

Installation:

# NPM
$ npm install react-flip-numbers --save

How to use it:

1. Import the component.

import react from 'react';
import FlipNumbers from 'react-flip-numbers';

2. Create a basic flip animation.

export default () => {
  return <FlipNumbers
            play
            color="#fff"
            background="#333333"
            width={50}
            height={50}
            numbers={12345}
          />;
};

3. All possible props to config the flip animation.

defaultProps = {

// CSS 3D transition perspective
perspective: 500,

// duration in seconds
duration: 0.3,

// height & width of the flip animation
height: number,
width: number,

// text color
color: string,

// background color
background?: string,

// start the animation on init
play: false,

// time to wait before starting the animation
delay: 0,

// additional styles
nonNumberStyle: {},
numberStyle: {},

};

Preview:

Flip Numbers In 3D Space - react-flip-numbers