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 -S
Features
-
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.
Usage
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> );