React is one of the most successful JavaScript frontend frameworks, with over 11 million websites implementing it. However, given how its component lifecycle works, adding animations to a React application can prove tricky. Today, we’ll focus on React animation libraries—exploring how they work as well as their compatibility with the greater React ecosystem.
While native CSS animations might be ideal in some scenarios, the libraries listed in this article help React applications implement complex animations with relative ease. Dig in to explore what might work best for you.
One question you might be asking yourselves is why even use an animation library? CSS and JavaScript offer pre-built animation support that these libraries are built on.
From this writer’s perspective, there are plenty of times that using native CSS animations is the way to go, especially when they’re easy to rig via CSS-React libraries like styled-components. However, based on the towering GitHub stars numbers, there’s an obvious need for animation libraries. They’re suited for apps that use a lot of animations, where the following considerations might be taken:
- A simplified development process: React animation libraries offer a range of pre-built components, APIs, and utilities that can abstract away the complexities of implementing animations. For example, using Framer Motion (which will discuss more in a later section) is far more integrated with React’s ecosystem than CSS transitions are. Because React is a declarative framework, declarative animation libraries pair well with it.
- Cross-browser compatibility: Implementing animations that work consistently across web browsers and devices can be challenging. React animation libraries can take care of browser inconsistencies, smoothing animation across various platforms. They can also handle things like vendor prefixing, optimizing performance, and invoking fallback mechanisms.
- Lots of support: Some React animation libraries (particularly Framer Motion, react-spring, and GreenSock) are backed by active communities of developers. These communities often create and contribute to documentation, tutorials, and examples—making it easier for developers to learn and use the library.
- React’s paradigm on integrations: React animation libraries are designed to integrate with React and its ecosystem. They can be easily combined with other React libraries, state management solutions like Redux or MobX, and routing libraries like React Router.
In short, developers use React animation libraries to simplify the animation development process, ensure cross-browser compatibility, and leverage community support.
There are various criteria to consider when evaluating animation libraries. For our purposes, we can break these into two groups—the first being considerations that apply to any animation framework! These include:
- The animation’s context. Is the framework for composite animations that you simply play or loop? Or is it for simple animations, where each element is individually rigged up? (Most on this list will be the latter.)
- The animation’s motion paradigm. Are animations state-based (i.e., declarative, like React), where transitions are automatic between states? Or are the animations vector-based, where transitions happen through incremental deltas?
- The animation’s transition function. Is the animation’s function based on duration? Or a real-world physics function?
Asking ourselves these questions can help us navigate which framework makes sense for which project.
The second group of considerations relate to React more specifically:
- Compatibility. Does the library have an official React plugin? If not, is the community plug-in well-supported and documented?
- Component lifecycle. How do the animations pair with React’s component lifecycle? What happens if the component becomes unmounted?
- Size. Does the animation library add any computational overhead to React’s otherwise lightweight footprint?
- Documentation. Does the documentation match React’s otherwise excellent documentation and engaged community?
Remember—choosing the correct animation library isn’t strictly about compatibility, presets, or performance. It’s about holistically evaluating how well a framework meshes with your existing React project.
Framer Motion is a feature-packed animation library designed for React. It’s built by—you guessed it—Framer, the company behind the popular website builder. With Framer Motion, developers can create simple, state-based animations using either spring physics or duration timing functions. It’s a successor to Pose/react-pose/Popmotion, which was also developed by the Framer team.
Framer Motion is built around its motion React component, which spawns a DOM primitive with props for animations and various animation states (known as variants). All state-based animation frameworks are declarative, which pairs well with React’s declarative syntax.
A basic Framer Motion component is simple and readable:
<motion.div />
Framer Motion uses both CSS transitions and SVG line animations under the hood. The syntax is readable and allows developers to get fairly creative with iterating between states. For instance, we can easily iterate between three states paired with common mouse events (which are known as gestures):
1import { motion } from "framer-motion";
2function AnimatedComponent() {
3const variants = {
4hidden: { opacity: 0, scale: 0 },
5visible: { opacity: 1, scale: 1 },
6hover: { scale: 1.2, transition: { duration: 0.5 } }
7};
8return (
9<motion.div
10variants={variants}
11initial="hidden"
12animate="visible"
13whileHover="hover"
14>
15This component animates between three different states!
16</motion.div>
17);
18}
19Framer Motion is designed to work with React’s lifecycle, notably via AnimatePresence, a parent component that sustains the animation even if the motion component is unmounted.
Framer Motion has a somewhat nontrivial 50kb bundle but provides documentation on how to reduce the bundle size to 5kb. Some developers have complained about the documentation, but the docs are generally improving. Plus, Framer Motion’s community is large enough for FAQs to be sprinkled across forums. It’s compatible with major React libraries, including DOM primitive styling libraries like styled-components, by using things like an as prop.
Of course, like any framework, Framer Motion has its flaws. Notably, some developers have struggled with drag properties and responsive layouts, requiring some workaround hacks. Luckily, these issues aren’t too common.
In summary, Framer Motion is a leading React animation framework. Its highlights include:
- Being state-based/declarative, like React
- Supporting both physics and duration animations
- Neatly connecting with React’s underlying structure
- Having a massive community and countless developer evangelists
As the name implies, react-spring is a state-based React animation library that prioritizes support for spring animations. Spring animations are physics animations modeled after a real spring—with mass, friction,and tension as inputs.
A basic react-spring animation would look something like this:
1import { useSpring, animated } from 'react-spring';
2function AnimatedComponent() {
3const shakeProps = useSpring({
4y: 50,
5from: { y: 0 },
6config: {
7mass: 5,
8friction: 120,
9tension: 120,
10},
11});
12return (
13<animated.div style={shakeProps}>
14Good morning!
15</animated.div>
16);
17}
18react-spring includes presets for springs that are gentle, wobbly, stiff, and even ones that move like molasses. Spring animations don’t necessarily need to oscillate to the user; an animation may only involve a single “swoop” of a spring animation.
However, react-spring also supports duration animations with custom timing functions. While this contrasts with react-spring’s primary focus, it enables developers to use a single framework for any animations that require clear-cut timing.
One issue with react-spring, however, is that its documentation can be difficult to parse. (I've personally found this to still be true.) But it boasts a sizable community with over 25K GitHub stars; most issues are well-documented and resolved online.
react-spring addresses React’s component lifecycle by exposing an imperative API for animations divorced from the component’s lifecycle. This is a bit of a roundabout method in contrast to Framer’s parent approach, but it works. react-spring also doesn’t depend on useRef or useEffect; it is fully SSR compatible with its initial=null setting.
react-spring has a bundle size of around 19kb, which is fairly lightweight. Overall, it can be an excellent framework for React apps that prioritize spring animations. Some developers are switching from react-spring to Framer Motion for its more well-rounded support, and some have switched back since Framer Motion’s syntax can feel awkward.
In summary, react-spring’s highlights include:
- Being state-based/declarative, like React
- Supporting both physics/spring and duration animations, with fantastic support for the former
- Its SSR compatibility, which makes it excellent for React SSR frameworks like Next.js
- Having a massive community and many developer evangelists
Anime.js is a very popular JavaScript animation library with over 47K stars on GitHub, the highest on this list. But unlike Framer Motion and react-spring, Anime is a general-purpose JavaScript animation framework and needs to be manually bound to React. There is a react-anime package, but it isn’t official, which could be scary for some, especially given that Anime is due for a major release in the near future.
Anime is technically a declarative library like React, but recommends using CSS Transform property animations (e.g. translateX) that are inherently imperative. However, it is still a declarative language; when you stack animations, they are just states with various CSS properties. However, not being built for React could make Anime animations a bit inelegant; it still works, however, when wrapped in an effect.
For instance, here’s a React-Anime.js snippet that uses translateX:
1import React, { useEffect, useRef } from 'react';
2import anime from 'animejs/lib/anime.es.js';
3function AnimeExample() {
4const targetRef = useRef(null);
5useEffect(() => {
6const animation = anime({
7targets: targetRef.current,
8translateX: 250,
9rotate: '1turn',
10backgroundColor: '#FFF',
11duration: 2000,
12loop: true
13});
14return () => {
15animation.pause();
16animation.seek(0);
17};
18}, []);
19return <div ref={targetRef}>Hello from Retool!</div>;
20}
21Anime was featured in June 2023 on Hacker News; the creator commented and teased some new features, which include variable frame rates, better documentation, and improved performance. Today, though, Anime is an overall solid framework—with mediocre compatibility with React. It might be ideal for teams that use React as one of many frameworks across their repositories. Otherwise, for teams building heavily with React, the prior entries on this list might somewhat better fit.
In summary, Anime is a popular framework, which:
- Is declarative, but recommendations using imperative properties
- Supports exclusively duration animations with easing functions
- Has a sizable community
react-motion, a 21K+ starred library by Cheng Lou, is a spring-based React animation library. Unlike react-spring, react-motion exclusively offers spring support, with the documentation arguing that duration-based animations aren’t an elegant solution.
A react-motion snippet would look something like this:
1import { Motion, spring } from 'react-motion';
2function AnimatedComponent() {
3const defaultStyle = { x: 0 };
4const style = { x: spring(10) };
5return (
6<Motion defaultStyle={defaultStyle} style={style}>
7{({ x }) => (
8<div style={{ transform: `translateX(${x}px)` }}>
9Good evening!
10</div>
11)}
12</Motion>
13);
14}
15react-motion has a small community, but good documentation. The issue with react-motion, however, is that it exclusively uses React rendering for generating animations, which can make animations feel a bit choppy if React is busy. react-spring was directly inspired by react-motion, bridging the gap by conditionally plugging into React rather than relying on it.
In general, if developers find react-motion compelling, there’s a fair chance they’ll adopt react-spring because it improves on react-motion’s core.
In summary, react-motion:
- Is state-based/declarative, like React
- Is exclusively spring animations
react-transition-group isn’t exactly a general-purpose React animation library. As the name implies, it’s more focused on entry and exit transitions. However, it’s worth including on this list because it is a great choice for developers that exclusively need entry and exit animations.
react-transition-group exposes components with four developer-friendly states—entering, entered, exiting, and exited:
1const transitionStyles = {
2entering: { opacity: 1 },
3entered: { opacity: 1 },
4exiting: { opacity: 0 },
5exited: { opacity: 0 },
6};
7By extension, react-transition-group is a state-based framework for creating simple animations on container elements with duration-based timing. It’s particularly simple, which makes combining it with styling frameworks like styled-components rather straightforward. It’s also only 4kb gzipped!
However, developers that need more complex animation would be ill-suited to depend on react-transition-group. There is a plugin that extends react-transition-group’s customizability named react-transition-group-plus, but it isn’t too popular!
In summary, react-transition-group is:
- State-based and declarative like React, but with limited states
- Exclusively supportive of duration-based animations
GSAP is a massive general-purpose animation library with plugin support for React. GreenSock is one of the pioneer animation frameworks that still has strong adoption today. It is used by over 11 million websites. GreenSock/GSAP could be considered part of jQuery’s lineage; GreenSock’s website directly compares it with jQuery transitions, boasting a 20x speed boost.
GreenSock includes two functions—context() and revert()—that help it work with React’s strict mode. We can see an example of that in this following snippet:
1const comp = useRef();
2useEffect(() => {
3let ctx = gsap.context(() => {
4gsap.to(".card", { duration: 2, x: 100, y: 100 });
5}, comp);
6return () => ctx.revert();
7}, []);
8Because GreenSock is a separate library altogether, it needs to live within an effect. GreenSock is an example of a library that is harder to use, but that gives more fine-grained control of animations by exposing a robust timeline feature. It’s an excellent framework for websites that really depend on detailed and precise frameworks, but it is probably too much for most projects.
GreenSock also only supports duration-based transitions, with no planned support for spring-based transitions. It has a limited physics plugin known as inertia, but it doesn’t offer the same extensibility as spring animations.
In summary, GreenSock:
- Is not explicitly designed for React and is imperative / vector-based
- Offers fine-grained animation control
- Supports exclusively duration-based animations
Lottie is an animation library that’s extremely different from any of the aforementioned libraries, all of which create simple animations. By contrast, Lottie is a library for creating and running what I call composite animations (where the moving components exist strictly for the animation and are self-contained—under the hood, they may be made of discrete SVG or Canvas elements, but to the developer, they’re a single entity).
For React support, there is a dedicated lottie-react library. It is extremely popular, evidenced by its ~300K weekly downloads. But to be clear, lottie-react isn’t for creating animations for arbitrary React components. Instead, it creates a wrapper React component for any Lottie animation, exposing functions for easy playback. Simply put, Lotties are more configurable GIFs than true React animations.
react-animations was a library maintained by Formidable. It was built on the popular animate.css script that provided preset PowerPoint-like animations—things like bounce, swivel-in, etc.
Presumably, because these animations have gone out of style and other robust animation libraries have grown, Formidable no longer supports the project (but the library remains available on GitHub). A similar framework that is still maintained is react-reveal, which ships with tons of preset PowerPoint-like animations.
Ant Motion is a motion library designed for Ant Design, the massive React component library maintained by Alibaba. Ant Motion only makes sense for developers that are using Ant Design, but it deserves an honorable mention given Ant Design’s popularity. Ant Motion’s design is similar to react-animations and react-reveal; it leans mostly on preset animations.
There are fantastic animation libraries available to developers. From Framer Motion, a declarative, feature-packed library, to GSAP/GreenSock, a general-purpose, fine-grained animation suite, the options are varied.
If animations are expected to be occasional, it’s worth determining whether built-in CSS transitions are suitable for your purposes. But if a framework is needed, evaluate whether you’d be best served by something fine-tuned for React, spring-based, or fine-grained. (Or maybe a composite framework like Lottie for closed-box animations!)
Thankfully, it’s generally quick (think: less than 15 minutes) to build and test individual animations using the frameworks shared here, so developers can shop a few solutions before picking their match.
Building in React? The best React component library is in Retool.
