React-set-animate NPM

react-set-animate

circleci

A Promise based API to animate React Component's with the power of D3's timer, ease and interpolation routines.

Installation

npm install react-set-animate --save

ES6 Import

import {Animate, AnimateMixin, AnimatedComponent} from 'react-set-animate'

ES5 require

ES5 code is transpiled to a CommonJS format that is ready for webpack or browserify. It is included in the npm build and you can build them for yourself by running make.

var Animate = require('react-set-animate').Animate;
var AnimatedComponent = require('react-set-animate').AnimatedComponent;

Support Transitions

The routines are provided by d3-ease. Please see that project for more information.

Linear
Quad
QuadIn
QuadOut
QuadInOut
Cubic
CubicIn
CubicOut
CubicInOut
Poly
PolyIn
PolyOut
PolyInOut
Sin
SinIn
SinOut
SinInOut
Exp
ExpIn
ExpOut
ExpInOut
Circle
CircleIn
CircleOut
CircleInOut
Bounce
BounceIn
BounceOut
BounceInOut
Back
BackIn
BackOut
BackInOut
Elastic
ElasticIn
ElasticOut
ElasticInOut

Core API

Animate

The Animate class has a tween method. This accepts 4 arguments: property name, final value, duration, easing. The property name is the name of a value in your React component. If the value is not in the state object then the value will be assigned as a property and the forceUpdate method will be called on your React component.

When tween is started the value of the property will be read from your React component. This value along with the endStateValue will be passed into d3's interpolate function. This function is very powerful and will interpolate number, strings, dates, colors and more. Please see the documentation for d3-interpolate for more information.

The tween function immediately returns a Promise object. The promise is resolved when the duration has elapsed. For browsers that do not support the Promises you should install a polyfill like es6-promises.

The timing of the tween is handled by d3's timer routine.

Methods

tween( stateProp, endStateValue, duration, ease )

AnimatedComponent

The AnimatedComponent class extends React.Component adding the setAnimate method. The AnimatedComponent create an instance of the Animate class and methods to interact with the root of all evil (state changing over time).

setAnimate( stateProp, endStateValue, duration, ease )
stopAnimate()

All of these functions return a process that is resolved when the transition is complete.

Usage

React Mixin

import {React} from 'react'
import {AnimateMixin} from 'react-set-animate'

const MyAnimatedComponent = React.createClass({

  mixins: [AnimateMixin],

  getInitialState() {
    return { x: 0 }
  },

  componentDidMount() {

    // animate this.state.x over 2 secs with final value of 1000
    // with the default ease (linear-in-out).
    this.setAnimate( 'x', 1000, 2000 )

    // animate this.state.x over 500ms with a final value of 0
    this.setAnimate( 'x', 0, 500, 'bounce-in-out' )
    .then(() => this.setAnimate( 'x', 0, 500, 'quad-in-out' ))


  }
})

ES6 Classes

import {React} from 'react'
import {AnimatedComponent} from 'react-set-animate'

class MyAnimatedComponent extends AnimatedComponent {
  constructor() {

    this.state = { x: 0 }

    // animate this.state.x over 2 secs with final value of 1000
    // with the default ease (linear-in-out).
    this.setAnimate( 'x', 1000, 2000 )

    // animate this.state.x over 500ms with a final value of 0
    this.setAnimate( 'x', 0, 500, 'bounce-in-out' )
    .then(() => this.setAnimate( 'x', 0, 500, 'quad-in-out' ))
  }
}

Composition

Use high-order functions for composition.

var yourComponent = React.render(
    <YourComponent />,
    document.getElementById('demo')
)

var animate = new Animate(yourComponent)
// your component's state 'x' will be updated to 350 with linear order in 1 sec, then alpha will be 0 on end of moving
animate.tween('x', 350/*end value*/, 1000/*duration(ms)*/).then(() => animate.tween('alpha', 0, 400))