Package Exports

react-anime

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-anime) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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