Animation in React

Animating your React apps doesn't have to be a hassle. With these helpful components and prebuilt animation keyframes, you'll be adding animation to your apps in no time.

We often forget about how animation is going to feature into our web projects. It's easy to let this happen - designs tend to take shape in the form of flat images, and when we're coding we're thinking about browser compatibility, screen sizes, and the implementation of features. How UI moves often finds itself thrown in as an afterthought.

This can cause issues. Sometimes parts of our UI need to move. They need movement to smooth the transition between states or to draw attention to the most important action or newest content.

For example, we might want to add a little animation when a price changes so that people don’t miss it, as in this little example:

[codepen_embed height=400 theme_id=1 slug_hash='aXGmpR' user='donovanh' animations='run'] See the example on CodePen [/codepen_embed]

It can become a problem when we leave this to last and put together quick solutions as needed, we can create situations where our animations aren't consistent, applied to the wrong things, or even forgotten entirely.

We've been working on ways to make adding UI animation to React projects quicker and easier, including releasing a new package called React Animation . React Animation is a helpful package of wrapper components along with pre-built animations you can apply to projects easily.

Why not just use something else? That's a fair question. There are lots of good ways of building animations into our React UI. React Transition Group offers a handy approach to adding and removing classes so that we can then apply animations to it. Unfortunately though, React Transition Group doesn't bring any animations, you still need to handle that part yourself. On the other hand, projects like React Spring offer advanced animation tools for handling large sets of animated elements.

What we needed was something in between - something that made it easy to apply animation to elements and offered a consistent set of pre-built animations we could apply to our projects knowing that the results would be reliable and consistent. It had to be easy to install and use, and offer enough flexibility that we could customise the animations to suit the project. It also gave us an opportunity to build using React hooks !

Let's take a look at what React Animation can do, starting with the helper components.

The repo includes components you can wrap around your content and they'll apply animation as needed. The first is AnimateOnChange .

Sometimes you want to have a little movement on screen to let people know when some content has changed. Writing this functionality for lots of small pieces of UI can quickly become a hassle, so instead you can simply wrap your content in the AnimateOnChange component.

We can get started by running npm install react-animation . Then the component is used as:

This component will respond to any change in the "children" content by applying a simple fade-out then fade-in animation with the new content. We can see the effect on this example:

[codepen_embed height=400 theme_id=1 slug_hash='exEKgV' user='donovanh' animations='run'] See the example on CodePen [/codepen_embed]

There's more we can do with this component. We can pass in properties to control how the animation works. One option is to supply a durationOut value (a number of milliseconds). This “durationOut” is the time the “out” animation will take (when the old content is animated away). We can set this to a larger or smaller number to change the feel of the fade animation. Here’s a slower example with a durationOut value of 1,500:

[codepen_embed height=400 theme_id=1 slug_hash='omeMyY' user='donovanh' animations='run'] See the example on CodePen [/codepen_embed]

By passing in animationIn and animationOut properties, we can have other animations apply when the content changes. These take the name of one of the included animations in the package. You can find a full list of these animations at the end of this post.

This makes use of the built-in bounce animations. Here it is in action:

[codepen_embed height=400 theme_id=1 slug_hash='PVKdZy' user='donovanh' animations='run'] See the example on CodePen [/codepen_embed]

If we need even more control, we can set any properties we like on the component using the style property. This is just like the “style” property in React, and accepts an object containing style rules in the normal way.

If you want to create your own custom animations for the AnimateOnChange component, there are two ways do to so. First, you can create your own keyframes and pass in your own animation string to both the animationIn and animationOut properties.

This will run the animation keyframes “my-anim-out” when hiding the content, and “my-anim-in” on the when showing the new content. We could define these keyframes like so:

This would result in a 3D rotating zoom effect, as seen here:

[codepen_embed height=400 theme_id=1 slug_hash='MLBmJX' user='donovanh' animations='run'] See the example on CodePen [/codepen_embed]

A second approach is to use classes . If you have a situation where you need to animate an element’s pseudo-element, or some element’s children, you might want to have a top left class applied for when the animation is in the “in” or “out” state. You can do this by specifying className.

This will apply the classes “foo-in” and “foo-out” for each stage. Here’s an example of it in action.

[codepen_embed height=400 theme_id=1 slug_hash='pGdzQw' user='donovanh' animations='run'] See the example on CodePen [/codepen_embed]

Having parts of your UI animate can be very useful for making sure people notice when information changes. You could use it to update a value in a live-streamed data set such as stock prices, or to call attention to when an item has been added to a shopping basket. The possibilities are endless.

Some components make use of a background image, or some other featured image that can be dynamic and so potentially a large file size. We wouldn’t want the component to display before we know that the image has loaded as this could result in showing partially-loaded images. Sometimes, instead, you want a component to stay hidden until an image has completed loading. This is where HideUntilLoaded helps.

You can use this in a similar way, wrapping your content and in this case telling it which image to wait for.

You can see this in action here:

[codepen_embed height=400 theme_id=1 slug_hash='pGrBvM' user='donovanh' animations='run'] See the example on CodePen [/codepen_embed]

We can even go further and pass in our own Spinner component that will show when loading is taking place.

[codepen_embed height=400 theme_id=1 slug_hash='ErvJqo' user='donovanh' animations='run'] See the example on CodePen [/codepen_embed]

Finally, we can also specify an animationIn for when the content has loaded. In this case we'll use the popIn animation (find these and more example animations on this demo page ).

[codepen_embed height=400 theme_id=1 slug_hash='KJvLyq' user='donovanh' animations='run'] See the example on CodePen [/codepen_embed]

The HideUntilLoaded component could be useful if you have a component that relies on a large background image - this could be product images with drop shadows and text overlays, or media components with photos and text information. These can be held back until ready and then animated in together.

The package also includes some helpful pre-built animations you can use. You can even bring them into your project without using either of the above helper components. To import them, you'll also need the associated keyframes, like so:

With the keyframes imported, we can use the animations object in our component styles. An example might be when you want a component to pop in on first load. We could make use of the animation like so:

In this example, animations.popIn evaluates to pop-in 500ms cubic-bezier(0.19, 1, 0.22, 1) forwards . You can use any of the built-in animations:

Can you think of situations where animation could help your UI? Maybe you want to draw attention to an important button, or fade-in new items in a list. If so, feel free to try React Animation. You can get started using:

From there you can import the components:

They will automatically bring in the needed keyframes definitions, so you can then use the components in your app!

I hope you find this a helpful and easy way to add animation to your projects.

At NearForm, we have vast experience in building solutions across a broad tech stack to deliver reduced complexities and overcome common hurdles. If you are creating  modern applications  and leveraging web technologies,  contact us  to learn more about how we can help. Learn more about React development at NearForm.