react-anime

Installation

npm i react-anime -S

Features

• Animate nearly all CSS, SVG, & DOM attributes by adding a prop with their name (eg. opacity, backgroundColor, transform inputs like translateX).

• Nested animations are as easy as putting an <Anime> component inside another.

• Cascading animations through delay prop.

• Add elements dynamically and have them animate in.

• TypeScript definitions included.

Usage

import Anime, { anime } from 'react-anime';

let colors = [ 'blue', 'green', 'red' ];

const MyAnime = (props) => (
    <Anime delay={anime.stagger(100)} scale={[ 0.1, 0.9 ]}>
        {colors.map((color, i) => <div key={i} className={color} />)}
    </Anime>
);