Animations Made Easy in React

Animations are becoming a staple in modern web applications. Almost every large company includes some sort of animation within their site, but most often I see them on landing pages; providing instructions or highlighting their services with animated pictures or vector graphics. This little touch brings that “oooh, ahhh” factor and gives an application just a little depth which makes all the difference. While I was doing research on different libraries to implement animations I came across one that was very beginner friendly and easy to start with: react-reveal. I didn’t have to look up any tutorials or extra documentation to try to get a grasp. Their documentation is very well put together and great at showing examples. While it is very easy to implement, it is also limited to fairly simple animations. React-spring or react-anime will give you more freedom and control to create complex animations with practice. For my use case, react-visuals was spot on. I am going to walk through an implementation of the react-reveal bounce effect, using vector images I created with Adobe Illustrator.

Install

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

I am using TailwindCSS for this tutorial, if you are confused I have an earlier blog post on it or check out the docs.

To check out other react-reveal documentation click here

My Code

I am rendering a large div with 3 divs inside, each containing the vector image and an article tag. I am using article here because I plan to add descriptions below the titles later. Each div is using flex box, with flex-direction:column so each element will be added side by side(the article and the image).

Animation

import Bounce from "react-reveal/Bounce";

You want to rap your animation around whatever element you want to apply the transition to, in my case that is the image. The component props I am using are fraction, delay, when, and right(direction of transition).

fraction: the fraction of space of the element that must be visible in order for the transition to trigger. 0.1 = 10%.

delay: delay of transition.

when: this is used for controlling when your transition is fired. If false, the transition will not fire until value is true. This is useful for controlling the animation with state like I am.

You can control the direction of the animation with right, left, top, bottom.

State

I am controlling the ‘when’ value with the useState hook. Each div is controlled by their own individual state(first, second, third). As you scroll and your mouse enters each div, onMouseEnter is called, changing the corresponding state to true, and revealing the animation.

That is it guys! Very easy implementation of a cool animation that can make any website come to life!

Hope you enjoyed.

Final Product: