Software systems to innovate and grow

Enhance App User Experience with React Animations & Transitions

By Engineering Team June 10, 2019 10 mins read

If you develop with React, you have probably seen how designing highly customizable and responsive user interfaces is beneficial. Thanks to virtual DOM and reconciliation, developers are able to create web apps that provide performance and fluidity akin to native applications. But it doesn’t stop there… React allows its users to take it a step further with animations and transitions, completely revitalizing the aesthetics of any application. By simply adding a fade in animation on your page load, and following a coherent design pattern, you’re able to enhance the user experience and visibility of the application.

There are two types of effects we can implement, transitions and animations. Let’s take a look at how we can use these different methods.

CSS Styling

If you’ve worked with CSS before, you’re most likely familiar with transitions. Basically, the transition property detects when the styles of a specific element have changed and tries to transition through the change using our given values for duration and timing function.

For example, let’s say you have a div element that renders a box:

Our aim is to use the state of the box to change the opacity on demand. We can connect a button onClick() function that increases or decreases the opacity.

Now, when we click the buttons, the opacity of our box should change. But it’ll happen instantly. To add a transition effect we need to apply the transition property to the box element.

The transition CSS property accepts the following values.

  • The name of the style we’re changing, in this case ‘opacity
  • The duration of the transition
  • The timing function
  • The delay after which the transition begins (None in our case)

In accordance with the values we’ve provided in our example, we’re getting a 0.3 second transition between opacity 0 and opacity 0.3, with an ease-out timing function which basically reduces the velocity of the transition at the end, instead of coming to a sudden stop.

CSS Animations

By using CSS animations, we get a lot of control over the kind of flow we want to achieve. We do this through keyframes, by setting the exact CSS properties we want at our defined intervals.

Here, we’re dynamically assigning the flip class to the box element through our state. Once again, it can be toggled through a button onClick() function like in the previous example.

Now, let’s define the flip class in our stylesheet.

We’re assigning the animation CSS property to this class, which takes the following values:

  • The name of our animation (can be anything)
  • The duration of our animation
  • The timing function
  • The animation direction, forwards, in our case

With that being done, we can now create keyframes using the animation name that we provided above.

You can probably guess what this does. We can assign custom styles at our given keyframes, 0% and 100% in our case.

Note: We can also use ‘to’ and ‘from’ instead, and it’d work the same way. However, by providing percentages we can add custom styles at ANY point we wish to. That’s the beauty of CSS animations.

In the given example, when we apply the flip class to the box, it should start from 0 degrees (it’s current rotation), and flip all the way to 180 degrees along it’s y-axis, taking 1 second to complete the whole animation. Similar to transition, it also has a timing function ease-out to smooth out the animation towards the end. The forwards value implies that our animation will go from 0% to 100%, and will retain the styles applied at 100% completion.

Using the react-transition-group Library

As stated in the documentation,

ReactTransitionGroup exposes transition stages, manages classes and group elements and manipulates the DOM in useful ways, making the implementation of actual visual transitions much easier.

Where this library really shines is when we have to switch components dynamically. Imagine you’re creating a to-do list, and each item in the list is its own component. By simply wrapping the list inside a TransitionGroup element, we can animate all the list items with ease.

Let’s look at a basic example.

The TransitionGroup element is a wrapper for our transitions, it takes multiple props. It renders a div by default. However, since we are applying transitions on a list, we can override that behavior by passing “ul” in the component prop to render an unordered list element in the DOM.

Similarly, CSSTransition is a wrapper for each element that needs to be transitioned. Here, we have list items, therefore inside our map, we will return each list item with a CSSTransition parent.

The two most important props accepted by CSSTransition are timeout and classNames:

  • timeout – The time in milliseconds to transition, you can specify individual times for enter and exit by passing an object,
    timeout={{ enter: 500, exit: 300 }}
  • classNames – The root name of the CSS classes that will be used to apply the transitions

After wrapping our list items in the CSSTransition component, we have to define our transitions in our stylesheet.

Note: All classes must start with the name of the transition we’ve passed to transitionName.

The initial styles at the time of mounting the component.

The style we want to apply, with the transition CSS property.

As you may notice, for fade-exit we’re doing the exact same thing, although we’re applying the opposite styles as we want it to fade out.

These classes supplied by the CSSTransition component make it really easy for us to customize our transitions exactly according to our needs.

What’s great about this library is, we can also combine the CSS animation property described in the previous section along with this approach. This way, we can apply custom animations to components that are entering or exiting the DOM.

More details about react-transition-group can be found in the official documentation of the library.

Using react-spring

React Spring is a fantastic animation library for React. What’s great about it is that it does not rely on React to update styles or transitions, which makes it especially fast when you’re working with a lot of data or complex components.

Similar to CSSTransitionGroup, you have to wrap your actual components inside of a Transition element, where you can provide all the necessary configuration props.

We pass the following props to Transition:

  • Items – The array of items we want to render, or the Boolean value or Component through which we can detect changes
  • Keys – In case of passing an array, we also pass unique identifiers as keys so the function can identify which component to remove and which to show
  • From – The initial styles of the component
  • Enter – The styles we would like to settle on once the component is mounted
  • Leave – The styles we want to apply to the component right before it is unmountede

Through this, we’re able to control some aspects of the transition.

Within this Transition component, we can pass a function that takes the individual items from the array we provided in the items prop and map it accordingly.

In the example above, our end result is a list of boxes, where we get a smooth fade and slide animation when we add or delete boxes in the list.

This is only a surface level view of what react-spring can do. It’s a very powerful library, so do check out the documentation for more examples.

Benefits and Pitfalls of Animations

Since the dawn of web development, we’ve seen many evolutions in terms of user interfaces. The current trend dictates the use of clean, minimalistic web pages that are responsive to the click and include eye-pleasing colors, spacing and animations. Animations provide users with visual feedback, so interacting with your app feels like a two-way process. Using the right animations and transitions can drastically improve the user experience. However, as with anything, there are some pitfalls you need to be aware of. For example, too many animations can make the user experience obnoxious. They can seem to make your website slow and unresponsive, where a user may expect an instant reaction, and instead they’re left seeing a seemingly never-ending animation. Give these tips a shot to help give your animations in React that extra edge.