Fortune Ikechi Fortune Ikechi is a frontend engineer based in Rivers State, Nigeria. He is a student of the University of Port Harcourt. He is passionate about community and software engineering processes.

Best React animation library: Top 7 libraries compared

7 min read 2150

Best React Animation Library: Top 7 Libraries Compared

Editor’s note: This post was updated on 12 July 2022 to reflect the current versions of React 18 and all React animation libraries mentioned, as well as to add Remotion and React Reveal to the comparison list.

For a React frontend developer, implementing animations on webpages is an integral part of your daily work, from animating text or images to complex 3D animations. Animation can help improve the overall user experience of a React application.

In this article, we’ll compare the top seven React animation libraries and evaluate each for popularity, developer experience, readability, documentation, and bundle size to help you choose the right library for your next React project.

We will cover the following animation libraries for React:

React Spring

React Spring is a modern animation library that is based on spring physics. It’s highly flexible and covers most animations needed for a user interface. React Spring inherits some properties from React Motion, such as ease of use, interpolation, and performance.

To see react-spring in action, install the library by using one of the commands below:

npm install react-spring

Or:

yarn add react-spring

Next, add the code below to create and animate a Hello React Spring text:

import React, { useState } from 'react';
import { createRoot } from "react-dom/client";
import { useSpring, animated } from 'react-spring';
import './styles.css';


function SpringDemo() {
  const [state, toggle] = useState(true)
  const { x } = useSpring({ from: { x: 0 }, x: state ? 1 : 0, config: { duration: 1000 } })
  return (
    <div onClick={() => toggle(!state)}>
      <animated.div
        style={{
          opacity: x.interpolate({ range: [0, 1], output: [0.3, 1] }),
          transform: x
            .interpolate({
              range: [0, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 1],
              output: [1, 0.97, 0.9, 1.1, 0.9, 1.1, 1.03, 1]
            })
            .interpolate(x => `scale(${x})`)
        }}>
        Hello React Spring
      </animated.div>
    </div>
  )
}

export default SpringDemo

In the code above, we first imported useSpring and animated from react-spring. Next, using the useState hook, we initialized an object x. Using interpolation, we took in multiple animated values as ranges and output to form one result that is scaled to x.

Interpolation is a function that allows you to take multiple values and form one result. Interpolation in react-spring can also be used for a series of states such as CSS keyframes and colors. Most animations are done by wrapping our animations in an animated div component.

react-spring offers a robust platform for animating React applications. Its props and methods are readable and easily understood.

Let’s see how react-spring stacks up against other React animation libraries:

Framer Motion

Framer Motion is a popular React animation library that makes creating animations easy. It boasts a simplified API that abstracts the complexities behind animations and allows developers to create animations with ease. Even better, it has support for server-side rendering, gestures, and CSS variables.

To install Framer Motion, run one of the following two commands in your terminal:

yarn add framer-motion

Or:

npm install framer-motion

Next, add the following code block to add a simple animation to a box component:

import React from "react";
import { motion } from "framer-motion";
import "./styles.css";

export default function App() {
  const [isActive, setIsActive] = React.useState(false);
  return (
    <motion.div
      className="block"
      onClick={() => setIsActive(!isActive)}
      animate={{
        rotate: isActive ? 180 : 360
      }}
    >
      Hello Framer motion
    </motion.div>
  );
}

Similar to react-spring, Framer Motion offers built-in components for animations.

For example, motion.div is used to wrap your object for animations. It helps you style your components and elements faster and also improves the code readability. A downside to this is that it could be bulky as your elements for animation grow.

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

Framer Motion has a much larger bundle size than react-spring and is not as popular in terms of stars, but its documentation is somewhat easier to understand and merits consideration for your next React project.

React Transition Group

React Transition Group is a development tool that reduces the need for boilerplate code to the nearest minimum. Unlike many other React animation libraries, such as react-spring, React Transition Group uses simple components to define animations.

The library does not define styles itself, but instead manipulates the DOM in useful ways, making it much more comfortable for developers to implement transitions and animations. In other words, the React Transition Group library offers a more straightforward approach to animations and transitions.

Run one of the following commands in your terminal to install react-transition-group:

npm i react-transition-group

Or:

yarn add react-transition-group

Next, add this code block to create a basic animation using React Transition Group:

import React from "react";
import { createRoot } from "react-dom/client";
import { Transition } from "react-transition-group";
import "./styles.css";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      in: false
    };
  }
  componentDidMount() {}
  onClick = () => {
    this.setState(state => ({ in: !state.in }));
  };
  render() {
    return (
      <div className="App">
        <button onClick={this.onClick}>BUTTON</button>
        <Transition in={this.state.in} timeout={5000} mountOnEnter appear>
          {state => <div className={`item item--${state}`} />}
        </Transition>
      </div>
    );
  }
}

export default app;

React Transition Group uses built-in components such as Transition to add animations and transitions to elements, thereby separating your elements from your animations.

Now for the report card:

React Transition Group also comes with support for TypeScript, which can be installed using the command below:

npm i @types/react-transition-group

React Transition Group is a good animation library and has a very small bundle size. It’s one of the most popular animation libraries and should be considered for your next React project.

React Motion

React Motion is a popular React animation library that boasts an easier approach to create and implement realistic animations. It makes use of physics laws to create natural-looking animations for React elements.

Install react-motion by running either of the commands below on your terminal:

yarn add react-motion

Or:

npm i react-motion

To create a basic animation component using React Motion, add the following lines of code:

import React from 'react'
import { StaggeredMotion, spring } from 'react-motion'
const AnimatedGridContents = props => {
  return (
    <StaggeredMotion
      defaultStyles={props.items.map(() => ({ opacity: 1, translateY: -30 }))}
      styles={prevInterpolatedStyles =>
        prevInterpolatedStyles.map((_, i) => {
          return i === 0
            ? { opacity: spring(1), translateY: spring(0) }
            : {
              opacity: prevInterpolatedStyles[i - 1].opacity,
              translateY: spring(prevInterpolatedStyles[i - 1].translateY)
            }
        })
      }
    >
      {interpolatingStyles => (
        <div className="grid">
          {interpolatingStyles.map((style, i) => (
            <div
              className="card"
              key={props.items[i]}
              style={{
                opacity: style.opacity,
                transform: `translateY(${style.translateY}px)`
              }}
            >
              {props.items[i]}
            </div>
          ))}
        </div>
      )}
    </StaggeredMotion>
  )
}

In the code block above, using StaggeredMotion, we added transitions to the card components. With React Motion, you can take advantage of an API that simplifies animation components in React.

Now let’s analyze React Motion’s popularity and code quality:

Overall, React Motion is a sound animation library for your React application, especially with its almost lifelike animation behavior.

React Move

React Move is a library designed for creating beautiful and data-driven animations. It was designed to support TypeScript out of the box and also supports custom tweening functions.

Tweening is short for “inbetweening,” the process of generating images for frame-by-frame animation between keyframes. React Move also features lifecycle events in its transitions, as well as allowing developers to pass on custom tweens in their animations.

Let’s see how React Move stacks up to other component libraries:

React Move is growing in popularity among the developer community. This library can be used for all kinds of React animations and transitions. It shines more with its custom tweening, which gives developers more power to customize animations in their React applications.

Remotion

The Remotion React library was created in 2021. It was designed to create animations using HTML, CSS and JavaScript.

With Remotion, you can create videos as well as play and review them on your browser while using React components and compositions. Remotion also allows React developers to scale video animation and production using server-side rendering and parametrization.

Parametrization is the process of finding equations of curves and surfaces using equations, which can be very useful in creating meshes for videos.

More great articles from LogRocket:

Install remotion by running either of the commands below in your terminal:

npm init video

Or:

yarn add remotion

To create a basic animation component using React Motion, add the following lines of code:

import { useVideoConfig } from "remotion";
 
export const MyVideo = () => {
  const { fps, durationInFrames, width, height } = useVideoConfig();
  const opacity =frame >= 30 ? 1 : frame / 30; 

  return (
    <div
      style={{
        flex: 1,
        textAlign: "center",
        fontSize: "9em",
        opacity: opacity,
       }}
      >
      This {width}px x {height}px video is {durationInFrames / fps} seconds long.
    </div>
  );
};

In the code above, we added animation properties using opacity. We also added a video animation using the useVideoConfig() hook. When creating a video animation, we’d need the width, height, durationInFrames, and fps parameters in Remotion. You can read more about them in Remotion’s docs.

Let’s see how Remotion stacks up against other React animation libraries:

Remotion can be very useful for React video animations using React components. It shines more with its features and low learning curve.

React Reveal

React Reveal is a high-performance and easy-to-use library for adding animations to React applications.

Unlike most animation libraries, React Reveal only reveals animations and effects if you scroll down to the animated element, not during load time. This improves page speed by allowing animation components to be lazy-loaded.

It’s also important to note that React Reveal supports higher order components for some of its features.

You can install React Reveal with the command below:

npm install react-reveal --save

To create a basic animation, add the lines of code below:

import "./styles.css";
import React,  { useState } from "react";
import Zoom from "react-reveal/Zoom";

function AnExample(props) {
  let [reveal, setReveal] = useState(false);

  function toggleShow() {
    setShow(!reveal);
  }
  return (
    <div>
      <Zoom when={reveal}>
        <h3>This is an example of React reveal</h3>
      </Zoom>
      <button type="button" onClick={toggleReveal}>
        Toggle this button to reveal {reveal ? "Hide this button" : "Show the button"}
      </button>
    </div>
  );
}

export default function Nav() {
  return (
    <div className="Nav">
      <AnExample />
    </div>
  );
}

In the code block above, using Zoom from React Reveal, we created a basic animation that shows an animation once the button is toggled.

Let’s take a look at React Reveal’s popularity and documentation:

Though this is a newer animation library, as you can see from its growing popularity, React Reveal is here to stay!

Conclusion

Regardless of the project you’re working on, numerous animation libraries exist that can help you create user-friendly animations and transitions easily and quickly.

Out of this list and as of this writing, React Spring has the most stars on GitHub, while React Transition Group wins in terms of weekly downloads on NPM. However, other libraries may offer specific features that you need, such as tweening with React Move or lifelike animations with React Motion.

A lot of these libraries are customizable and include great built-in features and changes. Hopefully, with this comparison list, you can choose the right library for your next React application.

LogRocket: Full visibility into your production React apps

Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket combines session replay, product analytics, and error tracking – empowering software teams to create the ideal web and mobile product experience. What does that mean for you?

Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay problems as if they happened in your own browser to quickly understand what went wrong.

No more noisy alerting. Smart error tracking lets you triage and categorize issues, then learns from this. Get notified of impactful user issues, not false positives. Less alerts, way more useful signal.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — .

Fortune Ikechi Fortune Ikechi is a frontend engineer based in Rivers State, Nigeria. He is a student of the University of Port Harcourt. He is passionate about community and software engineering processes.
«
»

Using go generate to reduce boilerplate code

Ukeje Goodness
Mar 28, 2023 5 min read

Visualizing GraphQL query data with Neo4j

Rashedul Alam
Mar 28, 2023 6 min read

Efficiently manage large files in Git with Git LFS

Emanuel Suriano
Mar 28, 2023 12 min read

Leave a Reply