Hello Guys, Today, I will tell you how you can implement animation in your React project. We will use Wow.Js with Animate.css, which is the most popular library for animation.
Installing Wow Js for React Project from NPM
To use the wow.js library you need to install the wow js package from NPM. Which can easily install by the below command.
for YARN
yarn add wowjs
for NPM
npm install wowjs
And after that, you also need to link the animate.css file in your index.html file. Which is an essential thing you need to do. You can either use CDN or you can use animate.css file. You can also use the below animate.css CDN file. For that, you need to go to the public folder of your react project, there you will get an index.html file you need to paste the below CDN link there as I have done in the below picture.
Animate.css CDN Link
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
How to use Wow.js in React Project?
It's what we need to know. First of all, We need to import WOW from wowjs in react project. After that, you need to initiate wow.js when the component renders. It means you need to use useEffect if you are using function components else you need to use componenetDidMount. In the below snippet is a simple animation that you can use.
import React, { useEffect } from 'react';
import WOW from 'wowjs'
export default function WowJsPractice() {
useEffect(() => {
new WOW.WOW({
live: false
}).init();
}, []);
return (
<>
<div className="container">
<h2 className="text-center">Using Wow js in React</h2>
<div className="row">
<div className="col-lg-4 wow fadeInLeft" data-wow-delay="1s" >
<h4>This Wrapper Will animate</h4>
<p>I will also animate because I am in wrapper</p>
</div>
</div>
</div>
</>
);
}
What are the properties I can use in Wowjs attribute data?
data-wow-duration: It helps us to decrease or increase animation time.
data-wow-delay: It helps us in the delay of animation.
data-wow-offset: It helps us to start animation before the coming element is in view we use Distance to start the animation.
data-wow-iteration: It helps us to change how many times the animation should repeat. for infinite type animation, we use data-wow-iteration="infinite".
How to get wow js animations name?
If you are looking for animation names in wow js then the below image can help you in the below image. You can find all animations which are supported in wow js.
bounce flash pulse rubberBand shake headShake swing tada wobble jello bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flip flipInX flipInY flipOutX flipOutY lightSpeedIn lightSpeedOut rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight hinge jackInTheBox rollIn rollOut zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp slideOutDown slideOUtLeft slideOutRight slideOutUp heartBeart
Why do we need animation in React Project?
We use animation in our project because it looks cool when the website animates and, we get to see the transition.
