react-anime: A Simple Animation Library for React

react-anime

(ﾉ´ヮ´)ﾉ*:･ﾟ✧ 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

npm i react-anime -S

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.

• TypeScript/Flow definitions included.

Usage

import React from 'react';
import Anime, {anime} from 'react-anime';

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

Download Details:

Author: plus1tv
Source Code: https://github.com/plus1tv/react-anime

#react #react-native #javascript