(ノ´ヮ´)ノ*:・゚✧ 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.
npm i react-anime -S
-
Animate nearly all CSS, SVG, & DOM attributes by adding a prop with their name (eg.
opacity
,backgroundColor
,translateX
). -
Nested animations are as easy as putting an
<Anime>
component inside another. -
Animations can react to changes in
state
. -
Cascading animations through
delay
prop. -
TypeScript/Flow definitions included.
import React from 'react';
import Anime from 'react-anime';
const App = (props) => (
<Anime delay={(e, i) => i * 100}
scale={[.1, .9]}>
<div className="blue"/>
<div className="green"/>
<div className="red"/>
</Anime>
);