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:
react-simple-animate only takes a single command and you're ready to roll:
npm install --S react-simple-animate
The following example demonstrates basic animation from style A to B with
<Animate /> Component, by declaring
end props with a local state to control the
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.
You can easily apply CSS keyframes animation in <AnimateKeyframes /> Component by supply an array of styles.