React animations

React animations
Average rating: 0
(0 votes)

Thanks! You’ve rated this material!

It’s clear that React will play a significant role for web animations. We started the topic about multimedia for the open web last month and today we’d like to proceed with some in-depths techniques for creating React animations.

There are quite a few ways to do animations in React these days. But the author of the React Animations in Depth, Nader Dabit, highlighted five of them. Let’s take a closer look at them.

1. CSS Animations based on React component state

This approach is considered as the basic one. To perform an animation you should use (add or remove) CSS class properties. The high performance is your main benefit of using this technique. But only in case if you will not change any properties besides opacity or transform. Updating these based on state values is very simple, and will give us smooth transitions with only a single rerendering of our component.

But this approach also has some drawbacks. It is not a cross-platform one and won’t work, for example, with React Native. It relies on CSS and the DOM, and if you need to create something complex, it could be hard to control using this method.

2. JS Style animations based on React component state

The way of creating animations using JS styles is very similar to CSS classes way. But here, in contrast to the previous variant, all of your logic is placed in JS file, so no need to resort to CSS classes. The fact that you have no need to rely on CSS classes could be considered as the another advantage.

The main disadvantage of this technique is that it is not a cross-platform one.

3. React Motion

The idea behind React Motion library is using “Spring” API with a very solid base of animation configurations. This does not rely on timing, so it works better in cases with no need to cancel or stop an animation, or if you are working with variable dimensions in your application. Here you can set a style configuration on a React Motion component and get a callback function with children that represent those style values.

The main advantage of this approach is that it is a cross-platform one. It can be used in React Native and in React Web. But, at the same time, compared to pure CSS or JS styling, it is not performant in some cases.
To use this library, you will have to install it via npm or yarn:

yarn add react-motion

4. Animated

The Animated library is based on the same library as React Native. The basic idea behind Animated is you can create declarative animations, and pass in configuration object that controls what is going on within your animation. This is a cross-platform library which is very stable in React Native. It allows us to interpolate a single value into multiple styles using the interpolate method. With the Animated library, you can have a lot of control and flexibility over your animations.

Among the cons of this approach, we can say that it is not 100% stable on the web yet.

To use this library, you will have to install it via npm or yarn:

yarn add animated

5. Velocity React

Velocity React library is based on the existing Velocity DOM library. This technique can be described as a combination of Animated and React Motion approaches. Even if it’s new for you, you can start with it quite easy. The API is pretty simple and straightforward.

But it has some drawbacks: it is not a cross-platform one, so you can face some difficulties, for example, when the animation does not run on componentDidMount.

To use Velocity React, we must first install it using npm or yarn:

yarn add velocity-react

Different types of animation can be done using different approaches. So, for example, JS style animations can be used for basic things, and React Motion for anything crazy on the web.

The samples of code for the animations presented in this material you can find in the original article we have mentioned in the beginning.

Subscribe to our weekly newsletter to get more interesting information!

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

    Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
    Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
    Kharkiv Otakara Yarosha 22, 61000, Kharkiv, Ukraine