react-simple-animate

React Simple Animate

Make web animation simple :clap:

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

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

Prop	Type	Required	Description
startAnimation	boolean	✓	Defaults to false. Set to true to start the animation.
children	node	✓	Child component to be animated.
startStyle	string		Component initial inline style.
endStyle	string	✓	Component transition to inline style.
tag	string		Default tag is div, this allow custom tag to be wrap around.
onCompleteStyle	string		Style to be applied after the animation is completed.
durationSeconds	number		How long the animation takes in seconds.
delaySeconds	number		How much delay should apply before animation starts.
onComplete	function		Call back function after animation complete.
easeType	string		Easing type refer to http://easings.net/
className	string		To specify a CSS class.
forceUpdate	boolean		Force component to re-render.

Similar packages

Other packages similar to react-simple-animate

react-spring

react-spring is a spring-physics-based animation library for React. It provides more advanced and flexible animations compared to react-simple-animate, allowing for complex animations and interactions. It is highly performant and can handle a wide range of animation scenarios.

framer-motion

framer-motion is a powerful animation library for React that offers a wide range of features including gestures, layout animations, and more. It is more feature-rich compared to react-simple-animate and is suitable for creating complex animations and interactions.

react-transition-group

react-transition-group is a low-level animation library for React that provides more control over the transition states of components. It is more flexible but requires more setup compared to react-simple-animate, making it suitable for developers who need fine-grained control over animations.