Make web animation simple with react

Make web animation simple with react

React Simple Animate,UI Animation Made Simple.

React Simple Animate Logo - UI Animation Made Simple

React Simple Animate

Tweet CircleCI Coverage Status npm downloads npm npm

  • Animation from style A to B
  • CSS keyframes animation
  • Chain up animation sequences
  • Tiny size without other dependency

Install

$ npm install react-simple-animate

Docs

Quickstart

import react from 'react';
import { Animate, AnimateKeyframes, AnimateGroup } from 'react-simple-animate';

const props = {
  startStyle: { opacity: 0 }
  endStyle: { opacity: 1 }
};

export default () => {
  return (
    // This example demonstrate animate individual element.
    <Animate play {...props}>
      <h1>React simple animate</h1>
    </Animate>

    // This example demonstrate animate keyframes with individual element.
    <AnimateKeyframes play iterationCount="infinite" keyframes={['opacity: 0', 'opacity: 1']}>
      <h1>React simple animate with keyframes</h1>
    </AnimateKeyframes>

    // This example demonstrate animate group of animation with sequenceIndex.
    <AnimateGroup play>
      <Animate {...props} sequenceIndex={0} />
      <p>Next animation below: </p>
      <Animate {...props} sequenceIndex={1} />
      <p>Final animation below: </p>
      <Animate {...props} sequenceIndex={2} />
    </AnimateGroup>
  );
};

Contributors

Thanks goes to these wonderful people:

Github Repository