Package Exports

react-simple-animate

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-simple-animate) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Simple Animate

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: