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, {anime} from 'react-anime';
const App = (props) => (
<Anime delay={anime.stagger(100)}
scale={[.1, .9]}>
<div className="blue"/>
<div className="green"/>
<div className="red"/>
</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.
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, {anime} from 'react-anime';
const App = (props) => (
<Anime delay={anime.stagger(100)}
scale={[.1, .9]}>
<div className="blue"/>
<div className="green"/>
<div className="red"/>
</Anime>
);
