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 ·

Features:

Simple animation from inline style A to style B
React animation with CSS keyframes
Chain up animation sequences
Tiny size without other dependency

Install

$ yarn add react-simple-animate || npm install react-simple-animate

Docs

Quick start

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>
        </Animate>

        // 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>
    );
};