react-anime
(ﾉ´ヮ´)ﾉ*:･ﾟ✧ A super easy animation library for React built on top of Julian Garnier's anime.js.
Just place an<Anime>component and what you want animated inside.
Installation
npm i react-anime -SFeatures
-
Animate nearly all CSS, SVG, & DOM attributes by adding a prop with their name (eg.
opacity,backgroundColor,transforminputs liketranslateX). -
Nested animations are as easy as putting an
<Anime>component inside another. -
Cascading animations through
delayprop. -
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>
);
