React Simple Animate

Make web animation simple 👏

Features:

• Simple animation from inline style A to style B
• Make animation toggle easy
• In-built delay animation mechanism
• Tiny size 3,878 bytes (before Gzip)

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

import react from 'react';
import Animate from 'react-simple-animate';

export default function SexyComponent() {
    return <Animate durationSeconds={0.2}
         startAnimation
         delaySeconds={1.2}
         startStyle={{
           opacity: 0,
         }}
         endStyle={{
           opacity: 1,
         }}
       >
       <YourComponent> // your component here
    </Animate>;
}

API