DEV Community

loading...

Animate Components

nitin42 profile image Nitin Tulswani ・1 min read

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>
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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

  1. duration
  2. timingFunction
  3. delay
  4. direction
  5. iterations
  6. backfaceVisible
  7. 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.

Discussion (0)

pic
Editor guide