plus1tv / react-anime

✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!
https://codepen.io/collection/nrkjgo/
MIT License
1.56k stars 80 forks source link
animation anime dynamic hooks npm react typescript

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

npm i react-anime -S

Features

Usage

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