Let’s Fun With React-Reveal

Do you want to create animation in your react project? There are many frameworks for animation. Today I talk about react-reveal. Do you think as a beginner, it’s hard to create animation? No, rather it’s too easy and awesome that I choose to write! Let’s start.

At first, you should install:

npm install react-reveal --save 
OR 
yarn add react-reveal

Then, you go to your react project file where you want to create an animation. At first, I show a simple Fade effect.

import React from 'react';
import Fade from 'react-reveal/Fade';
const Animation = () => {
return (
     <div>
         <Fade>
            <h1>React Animation</h1>
         </Fade>
     </div>
);
};
export default Animation;

Then if you want to entry and leaving animation are same, then can use left, right, top, bottom.

        <Fade left>
            <h1>React Animation</h1>
         </Fade>

But, for different entry and leaving animation, you have to use the below code:

         <Fade effect="fadeInUp" effectOut="fadeOutLeft">
            <h1>React Animation</h1>
         </Fade>

Sometimes you need to delay starting your animation or reduce your duration time, then you can use delay, duration props. The default duration is 1000 milliseconds.

        <Fade delay={4000} duration={3000}>
            <h1>React Animation</h1>
         </Fade>

Like Fade you can customize other effects such as zoom, Flip, Roll etc. I try to write this article as so simple that you can easily use react animation without reading documentation. But, for further information, you can also read react-reveal documentation.

Introduction

If you like this, don’t forget to clap and also can follow me.