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.

The top 5 React animation libraries compared

5 min read 1460

top 5 React animation libraries compared

React is a library for building user interfaces. 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. Animations can help to improve the overall user experience while building a React application.

In this article, we’ll compare the top five 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.

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, you install 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 ReactDOM from 'react-dom';
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, first, we imported useSpring and animated both 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 also easily understood.

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

We made a custom demo for .
No really. Click here to check it out.

  • Popularity: 19k stars on GitHub and over 475,278 downloads per week on NPM; used by companies and startups such as Aragon, CodeSandbox, Next.js, and many others
  • Documentation: Well-written and beginner-friendly documentation, react -spring’s documentation allows you to copy a code snippet from the documentation and test or preview CodeSandbox
  • Bundle size (minified): react-spring 26.7kb!

Framer Motion

Framer Motion is a popular React animation library that makes creating animations easy. It boasts of 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 on 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. 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 grows. Overall, Framer Motion is a very strong, highly customizable, and powerful library:

  • Popularity: With 8.4k stars on GitHub and over 292,291 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 even view it in CodeSandbox
  • Bundle size (minified): Framer Motion minified at 90.8kb!

Framer Motion has a much larger bundle size and is not as popular as react-spring in terms of popularity and 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 tool for development by reducing the boilerplate code’s need to the nearest minimum. Unlike many other React animation libraries such as react-spring, React Transition Group brings simple components for defining animations, the library does not define styles itself but instead manipulates the DOM in useful ways, making the implementation of transitions and animations much more comfortable. In other words, the React Transition Group 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, as before, add this code block to create a basic animation using React Transition Group:

import React from "react";
import ReactDOM from "react-dom";
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 in-built components such as Transition to set animations and transitions to elements, thereby separating your elements from your animations.

Now for the report card:

  • Popularity: 7.9k GitHub stars and more than 6.2 million weekly downloads on NPM!
  • Documentation: Documents are beginner-friendly; examples are clear and can be easily understood with Codesandbox examples
  • Bunde size (minified): react-transition-group 14.2kb!
  • 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 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 an animation library that boasts an easier approach to create and implement realistic animations. React-Motion makes use of physics in order to create an almost natural animation for React elements.

Install React-Motion and create a basic animation by running the commands below on your terminal:

yarn add react-motion

Or

npm i react-motion

To create a basic animation component, 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 card components. With React-Motion, you can take advantage of an API that simplifies animation components in React.

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

  • Popularity: 19.2k stars on GitHub and more than 603,199 downloads on NPM
  • Documentation: Documents are interactive. You can copy the source code of a given component from the docs
  • Bundle size (minified): react-motion 19.8kb

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 for creating beautiful and data-driven animations to React. It was designed to support TypeScript out of the box and support custom tweening functions, Tweening is short for inbetweening, it’s a process of generating keyframes which are frames between images. React Move also features lifecycle events on its transitions, and you can also pass your custom tweens in your animations in React Move.

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

  • Popularity: With 6.2k stars on GitHub and over 117,029 weekly downloads on NPM! React Move is growing in popularity among the developer community
  • Documentation: Documentation is excellent; React Move provides code and an opportunity to test them on CodeSandbox
  • Bundle size (minified): react-move 12.7kb!

React Move can be used for all kinds of React animations and transitions. It shines more with its custom tweening, which gives a developer more power to customize animations in their React application.

Conclusion

Regardless of the project, you’re working on. Numerous animation libraries can help you create user-friendly animations and transitions easily and quickly too. A lot of these libraries are customizable and include great in-built features and changes. Hopefully, with this comparison, you can choose the right library for your next React application.

Full visibility into 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 is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

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.

Leave a Reply