← Back to Blog Home

Animate App Components with React Transition Group

React / Redux
by: Jake Silas
Animating app components in React

Article summary

Animating app components can be a nice way to improve the user experience and add some flair. Achieving this in React, though, can quickly become cumbersome as you work to manage the animations while components enter and exit the DOM. That’s where react-transition-group comes in.

React Transition Group provides a convenient way to coordinate the behavior of components throughout various stages of their lifecycle. Here’s how you can start adding transitions to your app:

Install the library.

yarn add react-transition-group
// types if needed
yarn add -D  @types/react-transition-group

Choose the appropriate wrapper.

React Transition Group provides four different wrappers to help you transition your components. The ones you choose depend on what you’re trying to achieve.

Transition

<Transition> provides a basic but highly customizable way of interfacing with Enter/Exit states. The child of the Transition component is a function that provides its children access to the current transition state.

CSS Transition

In many cases, CSS is used to animate a component from one state to another. The <CSSTransition> component is an extension of the <Transition> component geared towards making CSS transitions easier. It only expects that the classnames used for transitions align with a particular naming convention. Provided the classnames are correct, the <CSSTransition> component will trigger the animations at the scheduled times.

Switch Transition

The <SwitchTransition> component is used to replace an old child component with a new one. It wraps one of the previously mentioned transition types and provides additional structure around the order for mounting/unmounting components.

Transition Group

<TransitionGroup> manages a set of transitions. This is particularly useful for animating the addition or removal of items to or from a list.

Add your animation.

The transition wrapper component helps coordinate the “when” of the transition. The next step is to add the animation. You can think of this as the “how.” The animation you choose will depend on a variety of factors and should fit the feel of your app. The example below shows how to replace a component with a zoom-out/zoom-in animation.


<SwitchTransition>
  <CSSTransition key={uuid} timeout={500} classNames="zoom">
    <MyComponent />
  </CSSTransition>
</SwitchTransition>

 .zoom-enter {
   transform: scale(0%);
   transition: 0.4s linear;
 }
 .zoom-enter-active {
   transform: scale(100%);
 }
 .zoom-exit {
   transform: scale(0%);
   transition: 0.4s linear;
 }
 .zoom-exit-active {
   transform: sale(100%);
 }

As I alluded to above, when using CSSTransition it’s important that the classNames prop matches the prefix of the animation classes. That said, this can be configured. You can read more about that here.

Test your component transition.

Once you have your shiny new animations working within your app, you may notice that some tests have started failing. In most cases, your animated components have not been animated yet and are therefore not in the DOM. If this is the case, it might be necessary to either mock out transition components or disable wait timers like so:

import { config } from 'react-transition-group'
config.disabled = true

This can always be enabled/disabled on a case-by-case basis in the event you’d like to test that your components transition as expected.

Use React Transition Group for animating app components.

React Transition Group provides a convenient alternative to React when you’re animating app components. This, in turn, will improve the user experience.

Related Posts