react-anime

(ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-anime
1,536274.1.13 years ago8 years agoMinified + gzip package size for react-anime in KB

Readme

react-anime
!Npm Packagenpm-imgnpm-url !Licenselicense-imglicense-url !Unit Teststravis-imgtravis-url !Coverage Testscodecov-imgcodecov-url !Dependency Statusdavid-imgdavid-url !devDependency Statusdavid-dev-imgdavid-dev-url
(ノ´ヮ´)ノ:・゚✧ 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.
Documentation | Demos | Anime.js

Installation

```bash npm i react-anime -S ```

Features

  • Animate nearly all CSS, SVG, & DOM attributes by adding a prop with their name (eg. opacity, backgroundColor, transform inputs like translateX).
  • Nested animations are as easy as putting an <Anime> component inside another.
  • Cascading animations through delay prop.
  • Add elements dynamically and have them animate in.

Usage

```js 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>
); ```