npm i react-anime -S
A super easy animation library for React built on top of the anime animation library.
To use it, place an <Anime>
component in your render function and what you want to animate inside.
- Animate nearly all CSS and SVG attributes by adding a prop with their name (eg.
opacity
,translateX
). - Nested animations is as easy as putting an
<Anime>
component inside another. - Cascading animations through
delay
prop. - Animations can react to changes in
state
. - Easy Mount/Unmounting workflow.
- TypeScript/Flow definitions included.
import React from 'react';
import Anime from 'react-anime';
let root = (props, state) => (
<Anime delay={(e, i) => i * 100}
scale={[.1, .9]}>
<div className="blue"/>
<div className="green"/>
<div className="red"/>
</Anime>
);