react-anime

[![Npm Package][npm-img]][npm-url] [![License][license-img]][license-url] [![Unit Tests][travis-img]][travis-url] [![Coverage Tests][codecov-img]][codecov-url] [![Vulnerabilities][snyk-img]][snyk-url] > (ﾉ´ヮ´)ﾉ*:･ﾟ✧ A super easy animation library for React built on top of Julian Garnier's [anime.js](https://github.com/juliangarnier/anime).
> Just place an `` component and what you want animated inside. [Documentation](documentation.md) | [Demos](https://codepen.io/collection/nrkjgo/) | [Anime.js](https://github.com/juliangarnier/anime)
## 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 `` component inside another. - Cascading animations through `delay` prop. - Add elements dynamically and have them animate in. - [TypeScript](http://typescriptlang.org/) definitions included. ## Usage ```js import Anime, { anime } from 'react-anime'; let colors = [ 'blue', 'green', 'red' ]; const MyAnime = (props) => ( {colors.map((color, i) =>
)} ); ``` [license-img]: http://img.shields.io/:license-mit-blue.svg?style=flat-square [license-url]: https://opensource.org/licenses/MIT [travis-img]: https://img.shields.io/travis/com/plus1tv/react-anime?style=flat-square [travis-url]: https://www.travis-ci.com/github/plus1tv/react-anime [codecov-img]: https://img.shields.io/codecov/c/github/plus1tv/react-anime.svg?style=flat-square [codecov-url]: https://codecov.io/gh/plus1tv/react-anime [npm-img]: https://img.shields.io/npm/v/react-anime.svg?style=flat-square [npm-url]: http://npm.im/react-anime [snyk-img]:https://snyk.io/test/npm/react-anime/badge.svg?style=flat-square [snyk-url]:https://snyk.io/test/npm/react-anime