More than 14 million websites implement React, making it one of the most popular and successful JavaScript frontend frameworks. However, React’s virtual DOM system can make adding animations to a React application tricky. While native CSS animations might be ideal in some scenarios, a React animation library can help React app developers implement complex animations without resorting to slow, manual processes.
Keep reading to learn more about React animation libraries—including how each one works and how compatible they are with the greater React ecosystem.
One note before we begin—this article was originally published in September 2023 but has been updated for 2024.
So, why even use an animation library when CSS and JavaScript already offer the 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 well-suited for apps that use a lot of animations, or where developers need any of the following considerations:
- 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. It is also a declarative library, pairing well with React’s declarative framework.
- 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, which make 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.
Weekly NPM Downloads: 3.47M
Github Stars: 22.7K
Bundle Size: 44.2kB
License: MIT
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";
2
3function AnimatedComponent() {
4 const variants = {
5 hidden: { opacity: 0, scale: 0 },
6 visible: { opacity: 1, scale: 1 },
7 hover: { scale: 1.2, transition: { duration: 0.5 } }
8 };
9
10 return (
11 <motion.div
12 variants={variants}
13 initial="hidden"
14 animate="visible"
15 whileHover="hover"
16 >
17 This component animates between three different states!
18 </motion.div>
19 );
20}Framer 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 44kb 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.
Who can benefit from Framer Motion?
- Developers who prefer state-based/declarative code, like React
- Developers who need both physics and duration animations
- Developers who care about tight integrations with React’s underlying structure
- Developers whwo lean on community knowledge, as Framer Motion has a sizable community and is backed by a well-funded company.
Weekly NPM Downloads: 662.6K
Github Stars: 27.7K
Bundle Size: 19.4kB
License: MIT
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';
2
3function AnimatedComponent() {
4 const shakeProps = useSpring({
5 y: 50,
6 from: { y: 0 },
7 config: {
8 mass: 5,
9 friction: 120,
10 tension: 120,
11 },
12 });
13
14 return (
15 <animated.div style={shakeProps}>
16 Try Retool!
17 </animated.div>
18 );
19}
20react-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 exposes an Imperative API. This API can be called in a number of ways, including typical React lifecycle APIs or in response to user events, such as click handlers. 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. However, some have switched back since Framer Motion’s syntax can feel awkward.
Who can benefit from react-spring?
Builders considering Framer Motion may also benefit from react-spring, especially if they:
- Prefer state-based/declarative code, like React.
- Need both physics/spring and duration animations.
- Utilize an SSR site. react-spring is SSR-compatible with frameworks like Next.js.
- Lean on community knowledge, as react-spring has copious developer evangelists behind it.
Weekly NPM Downloads: 208.2K
Github Stars: 49.2K
Bundle Size: 6.9kB
License: MIT
Anime.js is a very popular JavaScript animation library with over 46K 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. Not being built for React could make Anime animations a bit inelegant; but it still works 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';
3
4function AnimeExample() {
5 const targetRef = useRef(null);
6
7 useEffect(() => {
8 const animation = anime({
9 targets: targetRef.current,
10 translateX: 250,
11 rotate: '1turn',
12 backgroundColor: '#FFF',
13 duration: 2000,
14 loop: true
15 });
16
17 return () => {
18 animation.pause();
19 animation.seek(0);
20 };
21 }, []);
22
23 return <div ref={targetRef}>If you're cool, try Retool!</div>;
24}
25anime.js 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 also boasts a tiny bundle size of 6.9kB (minified + gzipped).
anime.js 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 be a better fit.
Who is anime.js a good fit for?
- Developers who don’t mind manually integrating a framework to React
- Developers who are very size-conscious about their bundles
- Developers who prioritize duration-based animations and easing functions
- Developers who want to lean on CSS’s imperative properties such as
transform - Developers who care about a massive community
Weekly NPM Downloads: 397.1K
Github Stars: 21.7K
Bundle Size: 4.8kB
License: MIT
react-motion, a 20K+ starred library by Cheng Lou, is a spring-based React animation library. Unlike react-spring (perhaps, ironically), react-motion is only library on this list that exclusively focuses on spring support. Its 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';
2
3function AnimatedComponent() {
4 const defaultStyle = { x: 0 };
5 const style = { x: spring(10) };
6
7 return (
8 <Motion defaultStyle={defaultStyle} style={style}>
9 {({ x }) => (
10 <div style={{ transform: `translateX(${x}px)` }}>
11 If you're cool, try Retool!
12 </div>
13 )}
14 </Motion>
15 );
16}
17react-motion has a small community, but good documentation. It boasts an even tinier bundle size than Anime, sitting at 4.8kB (minified and gzipped).
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
Who is react-motion a good fit for?
- Developers who only need spring animations
- Developers who are very size-conscious about bundle size
- Developers who use React
Weekly NPM Downloads: 10.8M
Github Stars: 10.1K
Bundle Size: 4kB
License: BSD-3-Clause
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. It boasts massive NPM download numbers, because it serves as a dependency for massive frameworks, including Material UI.
react-transition-group exposes components with four developer-friendly states—entering, entered, exiting, and exited:
1import { Transition } from 'react-transition-group';
2import { useRef } from 'react';
3
4const duration = 300;
5
6const transitionStyles = {
7 entering: { opacity: 1 },
8 entered: { opacity: 1 },
9 exiting: { opacity: 0 },
10 exited: { opacity: 0 },
11};
12
13function Fade({ in: inProp }) {
14 const nodeRef = useRef(null);
15 return (
16 <Transition nodeRef={nodeRef} in={inProp} timeout={duration}>
17 {state => (
18 <div ref={nodeRef} style={{
19 transition: `opacity ${duration}ms ease-in-out`,
20 opacity: 0,
21 ...transitionStyles[state]
22 }}></div>
23 )}
24 </Transition>
25 );
26}
27By 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. And it is also only 4kb minified + 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.
Who is react-transition-group a good fit for?
- Developers that want a state-based framework that is opinionated
- Developers that are size-conscious about their bundle size
- Developers that exclusively need duration-based animations
Weekly NPM Downloads: 441.0K
Github Stars: 19.1K
Bundle Size: 26.5kB
License: GreenSock License
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(() => {
3 let ctx = gsap.context(() => {
4 gsap.to(".card", { duration: 2, x: 100, y: 100 });
5 }, comp);
6 return () => ctx.revert();
7}, []);
8Because GSAP isn’t just built for React, it typically lives within an effect. These animations could also be handled on things like user events or a timer. 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.
GSAP 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.
Who is GSAP a good fit for?
- Developers who want an imperative / vector-based framework
- Developers who don’t use React
- Developers who care about fine-grained animation control
- Developers who exclusively need duration-based animations
Weekly NPM Downloads: 462.3K
Github Stars: 743
Bundle Size: 75.7kB
License: MIT
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 composite animations—a split we focus on in our high-level animation design breakdown.
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.
Weekly NPM Downloads: 23K
Github Stars: 3.1K
Bundle Size: 3.9kB
License: MIT
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.
Weekly NPM Downloads: —*
Github Stars: 4.6K
Bundle Size: —*
License: MIT
*Because Ant Motion is packaged with Ant Design, it does not have isolated NPM weekly downloads or bundle size.
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 is the second most popular React framework after React Bootstrap). 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, you have no shortage of options for your next project.
If you’re only expecting occasional animations, it’s worth considering whether built-in CSS transitions are suitable for your purposes. If you do need a framework, 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 pretty quick (think: less than 15 minutes) to build and test individual animations using the frameworks shared here. Additionally, you can test animation libraries on Retool’s custom React components, an ideal choice for developers looking for an excellent component library and build environment.
Ready to start building? Sign up for a free Retool account today.
Reader
