Animate Components

#react #css3 #javascript

Animate Components is a small library that provides different elemental components for doing animations in React. Its flexible and very simple to use.

Example

import React, { Component } from 'react';
import { Bounce } from 'animate-components';

class App extends Component {
  render () {
    return (
      <div>
        <Bounce>
          <h1>Hello World</h1>
        </Bounce>
      </div>
    );
  }
}

You can then pass various props to the component Bounce like,

duration
timingFunction
delay
direction
iterations
backfaceVisible
fillMode

How it works ?

Basically all the animation components are wrapped in a high order function which renders a <span> element with the styles derived from the props. It covers all the abstraction for composing an animation so that you don't have to worry about the @keyframes rule. Just add the properties to an animation and that's it.
View on GitHub.