react-anime

(ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

2 years after

Cover

react-anime

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 the anime animation library.

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

Features

  • Animate nearly all CSS and SVG attributes by adding a prop with their name (eg. opacity, translateX).
  • Nested animations is as easy as putting an <Anime> component inside another.
  • Cascading animations through delay prop.
  • Animations can react to changes in state.
  • Easy Mount/Unmounting workflow.
  • TypeScript/Flow definitions included.

Usage

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

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

See more in our API Docs and Examples.

Related Repositories

awesome-electron

awesome-electron

Useful resources for creating apps with Electron ...

awesome-react-components

awesome-react-components

Catalog of React Components & Libraries ...

frontend-stuff

frontend-stuff

A continuously expanded list of framework/libraries and tools I used/want to use ...

awesome-frontend

awesome-frontend

A curated list of amazingly awesome frontend libraries, resources and shiny thin ...

awesome-frontend

awesome-frontend

Awesome frontend, also my collections. ...