If you are a beginner in React, it may be difficult to include animations within your app. After all, there are many approaches to add animations; and some have higher learning curves than others.

In this article, I'll introduce React Transition Group and how to use it to add/trigger animations in your React app. Even if you're a React beginner, you will be able to liven up your app with animations for a better user experience.

Prerequisites

Before we get started, I recommend that you have these prerequisites to follow along:

Basic React knowledge
Basic CSS knowledge
Code editing software

Introduction: What is React Transition Group

React Transition Group is developed by the React developers themselves and is basically a set of components designed to animate React components on mounting and unmounting.

Just to be clear, it is not an animation library. It simply exposes transition stages so that it is easier to manage classes and handle animations when a component is entering or exiting.

The React Transition Group has 4 components that you can use to help you manage and trigger animations: Transition, CSSTransition, SwitchTransition and TransitionGroup. Let's walk through them all.

Setup & Installation

Assuming you have a React app already initialized, let's first install the react-transition-group package using the line below.

Then, we import the 4 components from the package.

1. Transition component

Now let's take a look at the Transition component first. It is a component that tracks when a component is mounted or unmounted (enter or exit). In particular, it tracks these 4 main states:

'entering'
'entered'
'exiting'
'exited'

We can pass any values and effects to these states to trigger animations of our component.

The most important prop for the Transition component is the in prop. This prop can be toggled to control when the component begins its 'entering' or 'exiting' state. Take a look at the example code below.

As seen in the code above, the button will toggle the in prop, which will switch the component to trigger 'entering' or 'exiting' states.

The timeout prop is the duration from the triggered 'entering' or 'exiting' state to the 'entered' or 'exited' state. Hence, it is also the duration of the transition.

So let's recap. When the button is clicked, the in prop is toggled and will set the component to its 'entering' state if true, or 'exiting' state if false. Once in the 'entering' or 'exiting' states, the component will remain in this state for the duration of the timeout then it will automatically shift to 'entered' or 'exited' state.

The code above will show a fade animation as specified in our transitionStyles object. Let's look at the result below.

For more information on what props you can pass in the Transition component, feel free to read the documentation.

2. CSSTransition component

This component is built upon the Transition component so it inherits all its props. The CSSTransition component is useful for applying CSS-based animations for your transitions.

First, we need to create 4 CSS classes as shown below:

Let me explain what each of them does.

'example-enter' is applied when the component begins its 'entering' state
'example-enter-active' is applied when the component transitions from 'entering' to 'entered' state
'example-exit' is applied when the component begins its 'exiting' state
'example-exit-active' is applied when the component transitions from 'exiting' to 'exited' state

Now, we create the component to as follows:

And the result will look like:

For more information on what props you can pass in the CSSTransition component, feel free to read the documentation.

3. SwitchTransition component

The SwitchTransition is a pretty cool component that allows you to control rendering between 2 child components. It has 2 modes: out-in or in-out.

out-in is where the first child leaves first, then is replaced by the next child component. For example:

in-out is where the next child comes in first, then the first child leaves. For example:

Typically, a SwitchTransition is used in conjunction with the Transition or CSSTransition component. Let's create an example using both the SwitchTransition and CSSTransition component.

First, we have our CSS classes.

For this example, we will use the out-in mode. Our App component will have the following:

The result will be:

For more information on what props you can pass in the SwitchTransition component, feel free to read the documentation.

4. TransitionGroup component

Last but not least, we have the TransitionGroup component. As the name suggests, this component does not handle the animations itself. Instead, it groups Transition or CSSTransition components and manages the mounting and unmounting of these components in a list.

For example, I have an array of fruits and I want to animate every list item when it appears. So first, I can use the map() function to display every fruit in the array. Every fruit in the array should have a CSSTransition component to handle their animations individually. I can then use TransitionGroup to wrap the list.

The code is shown below (some borrowed from MUI docs).

And the result will show every fruit added to the array with a nice animation!

Open Source Session Replay

Debugging a web application in production may be challenging and time-consuming. OpenReplay is an Open-source alternative to FullStory, LogRocket and Hotjar. It allows you to monitor and replay everything your users do and shows how your app behaves for every issue. It's like having your browser's inspector open while looking over your user's shoulder. OpenReplay is the only open-source alternative currently available.

Happy debugging, for modern frontend teams - Start monitoring your web app for free.

Conclusion

In this article, we have covered some of the basics of React Transition Group. I hope you've learned something valuable from this article.

React Transition Group is a highly flexible yet simple way to add animations to your React app. If you are comfortable with CSS, it won't be hard to create stunning animations and implement them using React Transition Group.

Thanks for reading! Do share and give a like if this article has helped you in understanding React Transitiong Group. Cheers!

References

https://reactcommunity.org/react-transition-group/
https://mui.com/components/transitions/