I recently discovered a fascinating animation library for React. By using this library, you can add some instant visual feedback when users perform some operations. The animation effect would provide a sense for users that their operation is taking effect. React Reveal provides various animation, and it can be easily added to existing code and implement animation for an app or website.
Before we start to code with react reveal, you need to install the package to your project:
npm install react-reveal-save
Type the command line above to your terminal, make sure you are in the correct directory, and it will take a few seconds to load.
The code below is what I will use to demonstrate the animation effect of React Reveal.
In my code, I initialize a state with a property show, and the default value of the show is set to true. I create a function call clickHanlder to toggle the state of the show between true and false. The boolean value is like an ON and OFF switch to trigger the animation.
Add the following code to the top of your component.
import Fade from “react-reveal/Fade”
After you import the Fade animation to your code, you may start the React Reveal!
We can wrap the code with a Fade tag, the part which we want to trigger the animation. Inside the Fade tag, we can set the direction of the animation, you may set it to top, bottom, left, right. We can add when to the fade tag, which will be used to determine when the animation should be triggered. Remember we initialized a state with show property and can be toggled it ON and OFF.
We simply add when={this.state.show} to the Fade tag. I really like the way how this part of the code is implemented, it sounds like a simple question, when to trigger the animation. We can answer this question with the show property YES or NO.
You definitely can do a lot more with React Reveal, please feel visit: https://www.react-reveal.com/docs/ and explore the potential of React Reveal!
Here is the demo below 👇
Feel free to try it on your own!
