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:
- Popularity:
- 23.5k stars on GitHub as of this writing
- Almost 800k downloads per week on NPM as of this writing
- Used by companies and startups such as Aragon, CodeSandbox, Next.js, and many others
- Documentation:
- Well-written and beginner-friendly documentation
- Allows you to copy a code snippet from the documentation and test or preview CodeSandbox
- Bundle size:
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:
- Popularity:
- 15.2k stars on GitHub as of this writing
- Over 1.3 million weekly downloads on NPM as of this writing
- 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:
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:
- Popularity:
- 9.3k GitHub stars as of this writing
- More than 9.5 million weekly downloads on NPM as of this writing
- Documentation:
- Beginner-friendly
- Examples are clear and can be easily understood with CodeSandbox examples
- Bunde size:
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:
- Popularity:
- 21k stars on GitHub as of this writing
- More than 645k weekly downloads on NPM as of this writing
- Documentation:
- Documents are interactive
- You can copy the source code of a given component from the docs
- Bundle size:
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:
- Popularity:
- 6.5k stars on GitHub as of this writing
- Over 110k weekly downloads on NPM as of this writing
- Documentation:
- Excellent!
- Offers the opportunity to test provided code on CodeSandbox
- Bundle size:
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:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to animate your React app with AnimXYZ
- Explore Tauri, a new framework for building binaries
- Advisory boards aren’t just for executives. Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
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:
- Popularity:
- More than 13.4k stars on GitHub as of this writing
- About 5k weekly downloads on NPM as of this writing
- Documentation:
- Very concise and excellent
- Provides links to test code in a sandbox
- Bundle size:
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:
- Popularity:
- More than 2.4k stars on GitHub as of this writing
- Over 54k weekly downloads on NPM as of this writing
- Documentation:
- Very well-written and concise
- Contains several code blocks and examples
- Bundle size:
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.
Get setup with LogRocket's modern React error tracking in minutes:
- Visit https://logrocket.com/signup/ to get an app ID.
- Install LogRocket via NPM or script tag.
LogRocket.init()
must be called client-side, not server-side. - (Optional) Install plugins for deeper integrations with your stack:
- Redux middleware
- ngrx middleware
- Vuex plugin
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>