JSPM

Make web animation simple 👏

Features:

• Simple animation from inline style A to style B
• Support add and remove child (New)
• Make animation toggle easy
• In-built delay animation mechanism
• Tiny size without other dependency

Install

$ yarn add react-simple-animate
or
$ npm install react-simple-animate -S

Example

Check out the interactive demo. 😍

Navigate into example folder and install

$ yarn && yarn start
or
$ npm install && npm run start

Screenshot of the example app below

Quick start

The following example demonstrate animate individual or array of components. React simple animate will take cares component will mount and unmount.

import react from 'react';
import Animate from 'react-simple-animate';
import YourComponent from './YourComponent';

const props = {
    durationSeconds: 0.2,
    startAnimation: true,
    startStyle: { opacity: 0 }
    endStyle={ opacity: 1 }
};

export default function SexyComponent(props) {
    return <div>
        // Animate individual component or components
        <Animate {...props}>
            <h1>React simple animate</h1>
            <YourComponent>
        </Animate>

        // Animate components with add/remove, style will inherit from parent Animate props
        <Animate {...props} animateOnAddRemove>
            {props.componentsArray.map((key) => <YourComponent key={key}>}
        </Animate>

        // Animate components with customise style for add or remove
        <Animate {...props} animateOnAddRemove>
            {props.componentsArray.map((key) =>
                <Animate startStyle={{ background: 'none' }} endStyle={{ background: 'red' }>
                    <YourComponent key={key}>
                </Animatee>}
        </Animate>
    </div>;
}

API