Animation in React using React Transition Group

Anastasia Reut

Recently I was working on a new project that is developed in React. Part of my job was to translate static HTML into interactive React components. I wanted to liven up a bit the application by using animation.

After doing some research I came across several animation libraries like React Transition Group, React-spring, React-motion and others. Each of these libraries has its pros and cons, some of them I found hard to use. Everything depends on the project needs. I wanted to add nice slide and transition effects to some elements. It’s a quite simple animation so I decided to stick to React Transition Group because of its simplicity.

React Transition Group used to be React add-on. Now it’s a separate package that is maintained by the community. I should say right away that React Transition Group components don’t provide us with the animation itself. Instead it gives us a state for each lifecycle phase so we can apply CSS animation to the component when it changes the state.

Let’s take a look at how it works in practice. I’ve created a simple sidebar. It’s hidden by default and triggered by a button. When button is clicked the component will change the state and render the sidebar.

Now we’ve got this working. Let’s add a nice slide effect when the sidebar shows up. We are going to use <Transition /> component. Let’s first install the package and import <Transition /> component to our App.

npm install react-transition-group --save

import Transition from "react-transition-group/Transition";

The <Transition /> component can be in four states: entering, entered, exiting and exited. It allows us to describe the component behavior when it passes from one state to another. It also takes two main props: timeout and in.

In the timeout prop we set transition duration in milliseconds. The in prop is going to track the state. When in value equals true the component moves to entering state and stays there for 500ms before switching to entered state. The same process happens when in value equals false — first the component moves to exiting and then to exited state.

Another important detail I should mention that <Transition /> component returns a function with the state as an argument. Placing children elements in it is not going to work.

Here is the finale code.

As you can see I’ve just modified renderSidebar function. I’ve wrapped sidebar with <Transition/> component where the in prop stores the state and the timeout is set to 1000ms. All the magic happens at CSS left property. When the state equals entering or entered it takes 0 and the component becomes visible. Otherwise it moves away by -50% (relative to its width) and becomes invisible.

This is how React Transition Group works. We do the animation using CSS. Of course, we can do a lot of things with it. React Transition Group provides us with other components like <CSSTransition /> and <TransitionGroup /> where we can add custom class names or animate elements in a list.

In conclusion, I’d like to say that React Transition Group is an excellent choice for simple animations.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade