Animation Libraries for React Applications
framer-motion, react-spring, react-motion, and react-transition-group are tools for adding movement and transitions to React interfaces. framer-motion and react-spring are modern JavaScript-driven libraries that handle complex physics and gestures. react-transition-group is a lower-level utility for managing CSS-based enter/exit classes. react-motion is a legacy library that pioneered spring physics in React but is no longer the primary choice for new development.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Animation Libraries for React: Architecture and API Compared
Choosing the right animation library affects how you structure components, manage state, and handle performance. framer-motion, react-spring, react-motion, and react-transition-group all solve movement in React, but they use different engines and API styles. Let's compare how they handle common engineering tasks.
🏗️ Animation Engine: JavaScript vs CSS
The core difference lies in where the animation calculation happens. Some libraries calculate values in JavaScript on every frame, while others toggle CSS classes and let the browser handle the interpolation.
framer-motion calculates animations in JavaScript using a optimized engine.
- It supports complex sequences and gestures out of the box.
- You define values directly on the component.
// framer-motion: JS-driven animation
import { motion } from "framer-motion";
function Box() {
return <motion.div animate={{ x: 100, opacity: 1 }} />;
}
react-spring calculates animations in JavaScript using spring physics.
- It interpolates values based on mass, tension, and friction.
- You bind animated values to styles.
// react-spring: JS-driven spring animation
import { useSpring, animated } from "@react-spring/web";
function Box() {
const props = useSpring({ x: 100, opacity: 1 });
return <animated.div style={props} />;
}
react-motion calculates animations in JavaScript using spring physics (Legacy).
- It uses a render-prop pattern to pass values.
- No longer recommended for new development.
// react-motion: JS-driven spring animation (Legacy)
import { Motion, spring } from "react-motion";
function Box() {
return (
<Motion style={{ x: spring(100) }}>
{({ x }) => <div style={{ transform: `translateX(${x}px)` }} />}
</Motion>
);
}
react-transition-group relies on CSS for the actual movement.
- It adds class names at specific times (enter, active, exit).
- You write the keyframes or transitions in your stylesheet.
// react-transition-group: CSS-driven animation
import { CSSTransition } from "react-transition-group";
function Box({ show }) {
return (
<CSSTransition in={show} timeout={300} classNames="fade">
<div /> {/* CSS handles .fade-enter-active */}
</CSSTransition>
);
}
🧩 API Style: Hooks vs Components vs Render Props
How you define animation logic changes based on the library's age and design philosophy. Modern libraries favor hooks, while older ones use components or render props.
framer-motion uses special components with animation props.
- You wrap standard HTML elements with
motion. - State is managed internally unless controlled via props.
// framer-motion: Component-based API
<motion.button whileHover={{ scale: 1.1 }} onClick={handleClick} />
react-spring uses hooks combined with animated components.
- You call
useSpringto get animated values. - You must use
animatedcomponents to apply those values.
// react-spring: Hook-based API
const props = useSpring({ opacity: isOpen ? 1 : 0 });
return <animated.div style={props} />;
react-motion uses a render-prop component pattern.
- You wrap content in
<Motion>and receive values in a function. - This creates deeper nesting in your JSX tree.
// react-motion: Render-prop API
<Motion style={{ opacity: spring(1) }}>
{(styles) => <div style={{ opacity: styles.opacity }} />}
</Motion>
react-transition-group uses wrapper components to manage class lifecycle.
- You wrap the element you want to animate.
- You must manage the
inprop manually to trigger states.
// react-transition-group: Lifecycle wrapper API
<CSSTransition in={isVisible} timeout={500} classNames="slide">
<div>Content</div>
</CSSTransition>
📐 Layout Animations: Automatic vs Manual
Animating layout shifts (like reordering a list) is notoriously difficult. Some libraries automate this using the FLIP technique, while others require manual measurement.
framer-motion supports automatic layout animations.
- Add the
layoutprop to handle position changes automatically. - No need to calculate start and end positions manually.
// framer-motion: Automatic layout
<motion.li layoutId={`item-${id}`} onClick={() => setSelected(id)} />
react-spring requires manual measurement for layout changes.
- You often need
useMeasureto get element bounds. - You must map those bounds to spring values yourself.
// react-spring: Manual layout with useMeasure
const [ref, { width }] = useMeasure();
const props = useSpring({ width });
return <animated.div ref={ref} style={props} />;
react-motion requires manual measurement for layout changes.
- You must track state changes and feed them to spring values.
- Complex layout shifts often require significant boilerplate.
// react-motion: Manual layout
<Motion style={{ width: spring(newWidth) }}>
{({ width }) => <div style={{ width }} />}
</Motion>
react-transition-group does not support JavaScript layout animations.
- It only handles CSS class transitions.
- Layout shifts must be handled via CSS transitions or other tools.
// react-transition-group: CSS only
/* No JS layout support — must use CSS transitions for width/height */
⚠️ Maintenance Status: Active vs Legacy
Using maintained software reduces security risks and ensures compatibility with future React versions. One of these packages is officially considered legacy.
framer-motion is actively maintained.
- Regular updates support new React features.
- Large community and extensive documentation.
react-spring is actively maintained.
- Regular updates and active development.
- Strong focus on physics and interpolation.
react-motion is legacy software.
- The creator recommends migrating to
react-spring. - Do not use for new projects due to lack of modern features.
react-transition-group is in maintenance mode.
- Stable and rarely changes.
- Maintained by the React community for basic use cases.
🤝 Similarities: Shared Ground
Despite their differences, these libraries share common goals and patterns.
1. ⚛️ React Integration
- All four libraries are built specifically for React.
- They rely on component lifecycles or hooks to trigger animations.
// All libraries rely on React state to trigger changes
const [open, setOpen] = useState(false);
// Animation triggers when 'open' changes
2. 🎞️ Enter/Exit Transitions
- All support mounting and unmounting elements with animation.
- Each handles the timing of removal differently (JS vs CSS).
// framer-motion
<motion.div exit={{ opacity: 0 }} />
// react-transition-group
<CSSTransition in={show} classNames="fade" />
3. 🛠️ TypeScript Support
- Modern versions of all packages include type definitions.
- Enables autocomplete and type safety in editors.
// All support TypeScript props
interface Props { isOpen: boolean; }
📊 Summary: Key Differences
| Feature | framer-motion | react-spring | react-motion | react-transition-group |
|---|---|---|---|---|
| Engine | JavaScript | JavaScript (Springs) | JavaScript (Springs) | CSS Classes |
| API Style | Declarative Props | Hooks + Animated | Render Props | Wrapper Components |
| Layout | Automatic (layout) | Manual (useMeasure) | Manual | None |
| Status | Active | Active | Legacy | Maintenance |
| Best For | Interactions | Physics | Legacy Support | Simple CSS |
💡 The Big Picture
framer-motion is like a high-level animation studio 🎬 — it handles the heavy lifting for you. Ideal for dashboards, interactive prototypes, and apps needing gesture support.
react-spring is like a physics engine ⚙️ — it gives you control over the forces driving the movement. Perfect for data visualizations and custom physical interactions.
react-transition-group is like a CSS helper 🎨 — it bridges React state and stylesheets. Best for simple fades or slides where performance is critical.
react-motion is like a classic car 🚗 — it pioneered the space but is outdated. Only use if maintaining existing legacy code.
Final Thought: For most modern applications, framer-motion offers the best balance of power and ease of use. If you need pure physics control, react-spring is the strong alternative. Avoid react-motion in new work.
How to Choose: framer-motion vs react-motion vs react-spring vs react-transition-group
- framer-motion:
Choose
framer-motionif you need a declarative API with built-in support for layout animations, gestures, and complex sequences. It is ideal for production apps requiring high-fidelity interactions without manual physics tuning. - react-motion:
Do not choose
react-motionfor new projects as it is legacy software superseded byreact-spring. Only use it if you are maintaining an older codebase that already depends on its specific render-prop API. - react-spring:
Choose
react-springif you prefer a physics-based approach where animations are driven by spring constants rather than durations. It fits well when you need fine-grained control over interpolated values and functional composition. - react-transition-group:
Choose
react-transition-groupif you want to keep animation logic in CSS files and only need simple enter/exit transitions. It is suitable for lightweight projects where JavaScript-driven animation is unnecessary.
Popular Comparisons
README for framer-motion
Motion for React
An open source animation library
for React
npm install motion
Table of Contents
Why Motion?
- Simple API: First-class React, JavaScript, and Vue packages.
- Hybrid engine: Power of JavaScript combined with native browser APIs for 120fps, GPU-accelerated animations.
- Production-ready: TypeScript, extensive test suite, tree-shakable, tiny footprint. Batteries included: Gestures, springs, layout transitions, scroll-linked effects, timelines.
🍦 Platforms
Motion is available for React, JavaScript and Vue.
React
import { motion } from "motion/react"
function Component() {
return <motion.div animate={{ x: 100 }} />
}
Get started with Motion for React.
Note: Framer Motion is now Motion. Import from motion/react instead of framer-motion.
JS
import { animate } from "motion"
animate("#box", { x: 100 })
Get started with JavaScript.
Vue
<script>
import { motion } from "motion-v"
</script>
<template> <motion.div :animate={{ x: 100 }} /> </template>
Get started with Motion for Vue.
🎓 Examples & tutorials
Browse 330+ official examples, with copy-paste code that'll level-up your animations whether you're a beginner or an expert.
Over 100 examples come with a full step-by-step tutorial.
⚡️ Motion+
A one-time payment, lifetime-updates membership:
- 330+ examples
- 100+ tutorials
- Premium APIs like Cursor and Ticker
- Transition editor for Cursor and VS Code
- AI skills
- Private Discord
- Early access content
👩🏻⚖️ License
- Motion is MIT licensed.
💎 Contribute
- Want to contribute to Motion? Our contributing guide has you covered.
✨ Sponsors
Motion is sustainable thanks to the kind support of its sponsors.
Partners
Motion powers the animations for all websites built with Framer, the web builder for creative pros. The Motion website itself is built on Framer, for its delightful canvas-based editing and powerful CMS features.
Motion drives the animations on the Cursor homepage, and is working with Cursor to bring powerful AI workflows to the Motion examples and docs.
Platinum
Gold
Silver