7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. React

Introduction to Animations in React

Scroll to top
Read Time: 8 mins

When building applications, animations are a great way to improve the overall user experience because they allow for greater interaction between the app and the user.

In some of our previous React tutorials, you got familiar with basic React concepts like JSX, routing, and forms. In this tutorial, we'll take it to the next level and try to understand animations in React. While there are many ways to add animations to a React application, we'll focus on the React Transition Group and how to use it in this article.

Animations in React

React provides a number of add-on utilities for animating React apps, one of which is called the React Transition Group, created by the React developers team.

It's not a library that sets animation styles; rather, it's a low-level API with four types of built-in components: Transition, CSSTransition, SwitchTransition, and TransitionGroup. As a result, animating React components in and out of the DOM during state changes is simple.

The React Transition Group is a very simple tool to get started with, and because it's lightweight, it speeds up the development process by reducing the need for boilerplate code.

Getting Started

First, let's install react using the create-react-app package in our terminal.

Open the index.html file of the public folder and edit the title like so:

Let's create a folder named components in the src folder of our application and create a Home.js file. Next, we update this file by creating a functional component called Home and rendering an h2 tag.

Next, update the App.js file by importing the Home component:

Then, start the development server by running:

React Transition Group Setup

Let's start by trying out a simple animation in React by installing the react-transition-group package to the project.

Next, we import the four components mentioned earlier from the react-transition-group package inside the Home.js file.

Next, we'll see how each one of these components works.

The Transition Component

The Transition component provides an API for defining transitions in a component from one state to another during mounting and unmounting.

Now, in the Home component, wrap up the h2 tag inside the Transition component and update the code like so.

Using the Transition tag, we've defined the portion where animation would take place. We also specified an in prop for the transition using inProp state, which toggles the transition state.

As you would have noticed, we specified the animation duration both in the defaultStyle above and in the Transition component using a timeout prop. It's because that's how React knows when to remove the animation classes from the element and when to remove the element from the DOM.

Save the above changes and refresh the page. Once the page has loaded, within a few seconds you should be able to see the animated text.

The CSSTransition Component

When trying to implement a CSS-based animation to your React component, the CSSTransition component comes in handy.

Because this component is based on the Transition component, it inherits all of that component's props and also makes use of a couple of classes to define transitions.

To see how this works, let's add the following code to the index.css file as shown below:

From *-enter to *-exit-active, each class defines transitions for when components are in the "entering", "entered ", "exiting", and "exited" states.

Then, in Home.js, we'll wrap up our component content into the CSSTransition tag, passing in the in and timeout props as well as the classes we defined earlier:

Notice that the classNames prop above has a react-animations value, which applies to all the classes defined.

The SwitchTransition Class

As the name "switch" suggests, this component is useful when you want to switch rendering between state transitions depending on a selected mode: in-out or out-in mode. It can be useful in scenarios where you want a component to fade out while you insert another.

To access the properties of this utility, we'll also wrap the contents of a component within the SwitchTransition tag. It's also important to note that the SwitchTransition should be used alongside the Transition or CSSTransition components.

Let's add the following code to the index.css file as shown below to create our classes:

Let's see how it works, starting with the out-in mode, which is the default mode:

The key prop in the code above keeps track of the state in the component, while the addEndListener prop prevents components from flipping almost instantly. Without it, it would appear as if no animation was implemented.

Next is the in-out mode, whereby the SwitchTransition tag takes in a mode prop with a in-out value. Now update your code to see how it works:

TransitionGroup

This component helps to manage Transition or CSSTransition components in a list. Below is an example of how it can be applied.

Update Home.js like so:

Save the above and refresh the page. Click on the button, and the item should be added to the list with animation.

From the code above, we initialized a static set of data called CONTACTS. Then, an onAddContacts function, which will handle adding a new contact, was defined and triggered on the button.

Each item in the list was wrapped in a CSSTransition tag to animate the newly inserted items. Finally, this component was wrapped within the TransitionGroup component to manage the transitions included within it.

Here is the complete Home.js component:

Wrapping It Up

In this tutorial, you saw how to get started with using animations in React. You created a simple React app and saw how to implement the four React Transition Group components. For in-depth information on animations in React, I would recommend reading the official documentation.

The source code from this tutorial is available on GitHub.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.