/react-anime

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

Primary LanguageJavaScriptMIT LicenseMIT

React Anime Logo

Npm Package License Unit Tests Coverage Tests Dependency Status devDependency Status

npm i react-anime -S

A super easy animation library for React built on top of anime.js.

To use it, place an <Anime> component and what you want to animate inside.

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.

  • Easily make mounting / unmounting animations.

  • TypeScript/Flow definitions included.

Usage

import React from 'react';
import Anime from 'react-anime';

const App = (props) => (
  <Anime delay={(e, i) => i * 100}
         scale={[.1, .9]}>
    <div className="blue"/>
    <div className="green"/>
    <div className="red"/>
  </Anime>
);

Refer to the Docs to see how to use the library, or check out our Examples.