Basics

Motivation

Animation with React can be difficult, there are a number of libraries out there that attempt to solve this but most of them require deep learning, specific configuration and can be a large dependency for your project. React Simple Animate focuses on standard CSS animation leveraging existing knowledge of styling and aims to provide a simple and great experience to get you on board with React animation.

The package provided some of the key features below:

• Animation from inline style A to B.
• Support CSS animation keyframes.
• Chain up animation sequences.
• Tiny size without other dependencies.

Installation

Installing react-simple-animate only takes a single command and you're ready to roll:

Getting Started

The following example demonstrates basic animation from style A to B with <Animate /> Component, by declaring start, end props with a local state to control the play animation.

Control React animation speed

React Simple Animate allows you easily adjust the animation speed with duration. The following example will adjust the animation speed duration to 1 second and delay by 0.3 seconds.

Animation with CSS keyframes

You can easily apply CSS keyframes animation in <AnimateKeyframes /> Component by supply an array of styles.