React-Simple-Animate

🎯 React UI animation made easy https://react-simple-animate.now.sh/

React Simple Animate Logo - UI Animation Made Simple

React Simple Animate

Features:

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

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares