Fluid Transitions with react-transition-group

, the components that are offered to us and we will also go into the detail of the components with some examples.

As a web developer, we want to create a great user experience but sometimes this is easier said than done.  Creating transitions between our pages and components helps to create a more cohesive experience for our users.  Managing the enter and exit state of our components is quite a challenging problem and is normally overcome by hooking into lifecycle methods but this leads to bloated code and is very difficult to do in 

components.  Surely there is an easier way?  

 is the answer! It tracks these enter and exit states for us and gives us a simple interface to add our transitions/animations.  We can now focus on creating smooth transitions and let  

 handle the pain of tracking the different states.

By the end of this post you will be able to:

To get the most out of this article, there are a few areas you need to be familiar with:

You don't need to be an expert in any of the above, a good foundation will do just fine. 

If you do not know any of the above but would like to learn, here are some great resources:

 allows us to identify when a component is mounting/unmounting, this gives us the ability to create nice fluid transitions when lifecycle methods occur that will help us improve our UI.

# npm
npm install react-transition-group --save

# yarn
yarn add react-transition-group

The purpose of each of these components is quite different.

component allows us to transition from one component to another, it is common to use JavaScript when using this component.  As stated in the docs, if you are using CSS for your transitions then you are probably better off using the 

.  The CSS Transition component will be useful when trying to achieve CSS transitions.  The 

component will become very useful when we have a group of 

components that we need to wrap.  We will delve into this more in our examples.

The final component offered is Switch Transition, we will not be using this but the docs have a great 

To delve deeper into any of the components, you can check out the docs 

 is not a tool to create transitions or animations, it is used to aid us when creating transitions (check out 

You are probably thinking right now that you have created plenty of transitions before without needing this module.  React Transition Group isn't doing anything amazing but it does make it much easier to identify when a component is entering or exiting.

On the other side of the coin, if you wanted to do a simple hover transition then you would just use regular old CSS to achieve this.  Take this example below.

We have some simple CSS that will move the position of our circle when hovered.  It would make no sense here to use 

, our examples in the next section will show more appropriate times to use 

Pop Up Animation using the CSSTransition Component

We have covered a lot of theory so far, so it is now time to get more practical.

Let's use the following pen as our starter.

You can see that functionally is working, but it doesn't look too good.  Let's add the CSS Transition component to help tidy things up!

The first action we need to do is wrap our 

 component, we also need to import our component.

const { CSSTransition } = ReactTransitionGroup; 
....
<CSSTransition
	in={showAlert}
	timeout={200}
	classNames="my-alert"
	unmountOnExit
>
	<Alert setShowAlert={setShowAlert} />
</CSSTransition>
....

The next step is to head into the CSS panel and add the following.

.my-alert-enter {
  opacity: 0;
  transform: scale(0.9);
  transform: translateX(-100px);
}
.my-alert-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms, transform 300ms ease;
}
.my-alert-exit {
  opacity: 1;
}
.my-alert-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
}

This is basic CSS but the magic is in the different 

enter, enter-active, exit and exit-active 

states.  How powerful is this?  We can set the CSS on our component bases on the stage of its lifecycle.  So great!

With all that in place we have the following:

 component.  Let's move onto our next example.

In this example, we are going to use the 

 component is used as a wrapper around our 

 components.  This is very common in lists.

So for this example, we are going to have a simple react app where we can add and remove boxes.  This is quite simple but is a great way to demonstrate how we can use 

As you can see we can add or remove boxes, we are going to make this a little nicer and have a transition when a box leaves and when a new box enters.

We are going to use JavaScript for our transitions and use the fantastic Greensock library which will make the transitions much easier to make.  Greensock is quite simple but also can be very powerful.  You can check out the 

We do the following imports which you can do at the top of the JavaScript panel in Codepen.

const { Transition, TransitionGroup } = ReactTransitionGroup;

<TransitionGroup className="box-list">
  	{boxes.map((b, index) => { ...... } }
</TransitionGroup>

<TransitionGroup className="box-list">
  	{boxes.map((b, index) => { <Transition><Box /></Transition> }
 </TransitionGroup

Remember above in our example, we were using the 

 will take care of when a component is entering or exiting.

<TransitionGroup className="box-list">
  {boxes.map((b, index) => {
    return (
      <Transition
        timeout={500}
        mountOnEnter
        unmountOnExit
        key={index}
        onEntering={(node) => {
          TweenMax.fromTo(
            node,
            0.5,
            {
              x: -100,
              opacity: 0,
            },
            { x: 0, opacity: 1 }
          );
        }}
      >
        <Box removeBox={removeBox} index={b.index} />
      </Transition>
    );
  })}
</TransitionGroup>;

Let's go through what's happening in the 

We accept a node which in our case is the 

 to basically say - take my node, set duration of 

Now let's add a transition when we remove a box.

 prop which gives us the ability to have a transition when a component is leaving:

 onExiting={(node) => {
   TweenMax.to(node, 0.5, {
     opacity: 0
   });
 }}

This is much nicer than just having the box vanish right away!

Feel free to fork the pen and add some different transitions to help your learning.

If you're interested in learning further, here are some great links:

Now go forth and create some great transitions!

AUTHOR

Paul Ryan

In this post, we will be looking at react-transition-group, we will discuss when you should use react-transition-group, the components that are offered to us and we will also go into the detail of the components with some examples.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Fluid Transitions with react-transition-group

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript