z-react / react-anime

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

react-anime

react-anime was written in an effort to make animations easier to work with. We made this possible by wrapping the awesome flexible yet lightweight JavaScript animation library, anime in a react component. Simply pass some props and your awesome animations come to life.

We wrote this library because react-motion could get really complex really really fast when animating several things and trying to coordinate with the animations. Also it wasn't nice to see large portions of some component code filled with callbacks. react-motion nonetheless is an awesome animation library!

Install

npm i react-anime -S

Usage

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

let root = (props, state) => (
  <Anime easing="easeOutElastic"
         duration={1000}
         direction="alternate"
         loop={true}
         delay={(el, index) => index * 240}
         translateX='13rem'
         scale={[.75, .9]}>
    <div className="blue"/>
    <div className="green"/>
    <div className="red"/>
  </Anime>
);

API

The API is based off anime.js documentation. TypeScript/Flow definitions are included so refer to those if you have any other questions.

Prop	Type
delay	`(el: Element, index?: number, len?: number) => number
duration	TimingValue ( above )
autoplay	boolean
loop	`number
direction	`'normal'
easing	`'easeInSine'
elasticity	number
round	`number
begin	(anime: AnimeInstance) => void
update	(anime: AnimeInstance) => void
complete	(anime: AnimeInstance) => void
[index: string]	`string

Note the last prop type, any other props can be used by anime, from CSS attributes to SVG attributes, you name it. :)

Transforms

Prop	Type
translateX	AnimationProp (Above)
translateY	AnimationProp
rotate	AnimationProp
scale	AnimationProp
scaleX	AnimationProp
scaleY	AnimationProp

SVGs

Prop	Type
d	AnimationProp
rx	AnimationProp
transform	AnimationProp
scale	AnimationProp
scaleX	AnimationProp
scaleY	AnimationProp

DOM

Prop	Type
value	AnimationProp
volume	AnimationProp

And more.

Contributing

To contribute make sure you have node v6.0.0+ and npm v3.8.0+

Project Scripts

# Create Development build of library
npm run build:develop

# Create Production build of library
npm run build:production

# Create both Production & Development build before finalizing pull request
npm run build:publish

# Run Tests
npm run test

# Watch Tests
npm run test:watch

# Run Tests and pass coverage to codecov
npm run coverage