DEV Community

Nitin Tulswani
Nitin Tulswani

Posted on

Animate Components

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


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

class App extends Component {
  render () {
    return (
          <h1>Hello World</h1>
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.

Top comments (0)