React Simple Animate

Make web animation simple 👏

Features:

• Simple animation from inline style A to style B
• Support will mount and unmount (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 startStyle = { opacity: 0 };
const endStyle = { opacity: 1 };

// individual component animation
export const SexyComponent(props) => 
    <Animate durationSeconds={0.2}
         startAnimation
         {  ...{ startStyle endStyle } }
       >
        <YourComponent>
    </Animate>;

// array of components with add or remove will trigger animation
export function SexyComponents(props) => 
    <Animate durationSeconds={0.2}
         startAnimation
         animateOnAddRemoveChildren
         {  ...{ startStyle endStyle } }
       >
        {props.componentsArray.map((key) => <YourComponent key={key}>}
    </Animate>;

API