Animating in React (The Many Ways!)

This article introduces you to the different options for creating animations in React, in the process we will look at the pros, and cons of using each technique, and some important statistics, so you know when to use which of them.

Depending on the complexity of your animation, some techniques would be fine as they are, and others that are optimized to handle more complex animations.

Here are the several methods we will discuss in this article.

1. Straight up CSS
2. React Transition Group
3. React Motion
4. React Spring
5. Greensock Animation Platform(GSAP)
6. Framer Motion

Let's get right into it!

1. Straight up CSS

When building a simple web animation, this is a great option. Using CSS enhances your site performance by requiring only a small amount of resources from your browser and machine’s RAM, giving your app a decent feel when using transitions.

You also get some control by using the animation property and its sub-properties such as animation-delay and animation-iteration-count.

CSS is best when you have simple transitions like toggling the states of UI elements or doing a fadeIn or fadeOut animation.

However, suppose you want to chain more than three animations in a row. In that case, you should use a JavaScript (JS) library instead of CSS because CSS sequencing becomes complicated with delays, and you'll end up with a lot of recalculations if you miss the timing.

Now, let's look into the JS/ React libraries for animation.

2. React Transition Group

React Transition Group offers a straightforward approach to animations and transitions by providing its in-built components such as TransitionGroup for defining animations.

It also exposes transition stages, manages classes, grouping elements, and manipulates the DOM in useful ways making animating very convenient.

Another exciting feature is that it's relatively small and won't add to the size of your bundle, and you can also use the CDN.

Here are some stats on React Transition Group:

• Popularity: 9.2k stars on Github, and more than 8.4 million weekly downloads on NPM.
• Documentation: Its docs are beginner-friendly; include Codesandbox examples to better illustrate.
• Support for Typescript: React transition group comes with the backing for TypeScript out of the box, and it can be installed using the command below:

npm install @types/react-transition-group

• Bundle size(minified): 13.5kB

Overall, it's a good animation library to consider for your next React project.

3. React Motion

React Motion is an animation library for React applications that makes realistic animations easier to build and implement.

It makes use of physics to create animations that feel natural. All you have to do is provide values for stiffness and damping within one of its components.

• stiffness refers to the speed with which the destination value is reached.
• damping is the friction encountered by the animated component during the transition.

Sequencing animations using React Motion, however, is not as easy and readable as some of the alternatives due to its complex nature.

Now, let's see some stats:

• Popularity: 20.8k stars on Github, and more than 611k weekly downloads on NPM
• Documentation: They have well-documented examples of their features, and you can copy the source code of a given component.
• Support for Typescript: You can use Typescript with React Motion by using the type definitions.
• Bundle size(minified): 19.8kB

4. React Spring

React Spring is a spring-physics based animation library that follows a modern approach to animation.

It’s highly flexible and covers most animations needed for your User interface.

React spring inherits some properties from React Motion, such as ease of use, interpolation, and performance.

One really cool special about React Spring is the ability to apply animations without relying on React to render updates frame by frame.

Now, let’s see how React spring stacks up against other React animation libraries:

• Popularity: 23.1k stars on Github, and more than 727k weekly downloads on NPM
• Documentation: Well-written and beginner-friendly documentation. You can copy a code snippet from the documentation and test or preview CodeSandbox.
• Support for Typescript: You can install the package for NPM or Yarn
• Bundle size(minified): 172kB!

5. GSAP

The Greensock Animation Platform (GSAP) is a great animation library for the web because it enables you to animate just about anything that can be accessed with JavaScript, including DOM Elements, SVGs, generic objects, canvases, and more.

GSAP is a great tool to build simple to very complex physics-based animations. It allows developers to sequence motion and controls the animation dynamically.

GSAP is also a great choice because it is:

• flexible
• lightweight
• fast (estimated to be 20x faster than jQuery),
• has a large and supportive community via the forums.

Now, for the report card,

• Popularity: 14.1k stars on Github, and more than 270k weekly downloads on NPM
• Documentation: Has well detailed docs with Codepen examples. If you need any help, ask on the GreenSock [forums]
• Support for Typescript: Use the Typescript definitions on Github
• Bundle size(minified): 62.1kB

While you're here, check out this article to learn how to build a sleek preloader animation :)

6. Framer Motion

Framer Motion is a popular React animation library. Like GSAP, Framer Motion allows us to apply both simple and complex animations and transitions to DOM elements defined in React components.
Its syntax is easy to understand which helps you make animations faster and also improves the code readability.

Overall, Framer Motion is a very strong, highly customizable, and powerful library:

• Popularity: 14.5k stars on Github, and more than 1.1 million weekly downloads on NPM
• Documentation: Easy to understand and beginner-friendly; you can find the source code of a given component in the docs and also view it in CodeSandbox.
• Support for Typescript: Framer motion supports Typescript off the bat. Even if the files are in TypeScript, you can write regular ES6/JavaScript and they will still work.
• Bundle size(minified): 140.7kB

Although it could get bulky as your animation elements grow, and also has a much larger bundle size when compared to some other libraries, its widely used nowadays, and merits consideration for your next React project.

Conclusion

There are a lot of options when it comes to creating user-friendly animations and transitions in your React applications. Many of which are easy to get started with and customize.

In this article, you have been introduced to some of these libraries, and hopefully, with the comparisons, you can choose the option that best suits your animation needs for your next React project.

Also, if you have used any other animation libraries, kindly share them in the comments section!

Thanks for reading, and have fun animating ;)

Before you go, check out this list of other library animations:

• React-animations — the library is built on all animations with animate.css. It is easy to use and has a lot of animation collections.
• animated — Declarative Animations Library for React and React Native
• Anime.js — Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
• wow — Reveal Animations When You Scroll. Very Animate.css Friend.
• react-move — Beautiful, data-driven animations for React.
• velocity — Velocity is an animation engine with the same API as jQuery’s $.animate().