https://github.com/plus1tv/react-anime

✨ (ﾉ´ヮ´)ﾉ*:･ﾟ✧ A super easy animation library for React!
https://github.com/plus1tv/react-anime

animation anime dynamic hooks npm react typescript

Last synced: 1 day ago
JSON representation

✨ (ﾉ´ヮ´)ﾉ*:･ﾟ✧ A super easy animation library for React!

• Host: GitHub
• URL: https://github.com/plus1tv/react-anime
• Owner: plus1tv
• License: mit
• Created: 2016-09-07T01:44:16.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-02-27T16:42:55.000Z (almost 2 years ago)
• Last Synced: 2024-12-08T19:55:06.864Z (5 days ago)
• Topics: animation, anime, dynamic, hooks, npm, react, typescript
• Language: TypeScript
• Homepage: https://codepen.io/collection/nrkjgo/
• Size: 7.07 MB
• Stars: 1,556
• Watchers: 26
• Forks: 80
• Open Issues: 27
• Metadata Files:
  • Readme: readme.md
  • License: license.md

Awesome Lists containing this project

README

        
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