Adding animations via React Reveal

React Reveal - Possibly the simplest way to add animations in React

While we certainly wouldn't want to overdo it, when it comes to animations, a few well placed animations can and will add a certain feel of polish to a website. Many developers completely refrain from ever adding any animations, because they imagine that this would be an extremely complicated and time consuming task.

However, as we will see, these worries are unfounded. In the following we will see how we can easily add animations in react.

Setup

When working with React Reveal all we have to do is to simply add the dependency via npm:

npm install react-reveal

No need to import any CSS files or to wrap your components with a HOC, Providers or anything of that kind.
Congratulations, your application is now ready to use React Reveal's animations!

Let's have a look at some cool things we can do with the library.

Zooming images in

Imagine you are building a new landing page and the hero section contains a huge image of the awesome product you're selling.

This is an ideal place to spice things up with a little animation, by zooming in the image. We can achieve this by wrapping the image with a <Zoom> component.

import Zoom from 'react-reveal/Zoom'

const HeroSectionZoom = () => (
  <div className="flex-row-styling">
    <div>
      // Same as before
    </div>
    <div>
      <Zoom>
        <img src="/images/cat.jpg">
      </Zoom>
    </div>
  </div>
)

<Zoom> is one animation effect of many supported by React Reveal

Other animations

In addition to zooming, there are many animation effects supported by React Reveal.

Like revealing elements:

import Reveal from 'react-reveal/Reveal'

const RevealSample = () => (
  <Reveal spy={idx} appear={true}>
    <Typography variant="h5">RevealTextExample</Typography>
  </Reveal>
)

And sliding elements into view:

<Grid container>
  <Grid item xs={6}>
    <Slide left>
      <Box display="flex" flexDirection="column" justifyContent="center">
        <Typography variant="h3">Cat'omat</Typography>
        <Typography variant="body1">
          Machine the cat machine. Robot singularity AI cats conspiracy.
        </Typography>
      </Box>
    </Slide>
  </Grid>
  <Grid item xs={6}>
    <Slide right>
      <img src="/images/blog-posts/react-reveal-animations/cat.jpg" alt="" />
    </Slide>
  </Grid>
</Grid>

Customizing animations

If you took a look at the previous example, you might already have guessed, that we are able to customize animations by setting properties. We're able to set the origin of the animation with the

• left
• right
• bottom
• count properties. Which is how we made the text slide into view from the left and the image from the right.

There are quite a few properties which come in handy, such as the duration property:

<Zoom duration={500}>500</Zoom>

<Zoom duration={2000}>2000</Zoom>

Conclusions

As we've seen, adding animations to react can be quite easy, if we use a library such as React Reveal. If you want to learn more about animations with this library head over to react-reveal.com.