Motion vs react-spring
Which should you use? A side-by-side look at what each one does, who it suits, what it costs, how hard it is to set up, and where each falls short.
Open source · MIT
An open source animation library for JavaScript, React and Vue.
Open source · MIT
A React animation library built on spring physics for smooth, natural motion.
The short answer
Choose Motion if you need…
- React developers who want to animate components with a simple API
- JavaScript developers animating elements on a web page
- Vue developers looking for an animation package
- Teams building interactive websites that need gestures, springs or scroll-linked effects
Choose react-spring if you need…
- React developers who want fluid, physics-based animations
- Developers building interactive UIs that respond to user input
- Projects that need animations in both web (react-dom) and react-three-fiber 3D scenes
- Developers who prefer declarative animation code but sometimes need imperative control
Side-by-side
| Motion | react-spring | |
|---|---|---|
| Type | Library | Library |
| Price | Free and open source | Free and open source |
| Licence | MIT | MIT |
| GitHub stars | 34.8k | 29.3k |
| Setup difficulty | Intermediate | Intermediate |
| How you get it | Install with a package manager | Install with a package manager |
| Main language | TypeScript | TypeScript |
| Last code update | 4 days ago | 5 days ago |
What each one is
Motion
Motion is a code library that lets developers add movement to web pages and apps, such as sliding, fading, springy bounces, and layout changes. It offers packages for React, plain JavaScript and Vue, and its README says it uses browser APIs for smooth, GPU-accelerated animation. It was formerly known as Framer Motion.
react-spring
react-spring is a JavaScript library for adding animations to React user interfaces. Instead of fixed durations, it mainly uses spring physics, so elements move in a fluid, natural way. Developers use it to animate things like fading or sliding elements in response to state changes.
Best for
Motion
- React developers who want to animate components with a simple API
- JavaScript developers animating elements on a web page
- Vue developers looking for an animation package
- Teams building interactive websites that need gestures, springs or scroll-linked effects
react-spring
- React developers who want fluid, physics-based animations
- Developers building interactive UIs that respond to user input
- Projects that need animations in both web (react-dom) and react-three-fiber 3D scenes
- Developers who prefer declarative animation code but sometimes need imperative control
Strengths
Motion
- The README lists first-class React, JavaScript and Vue packages under one name
- Released under the MIT license and tree-shakable, per the README
- Large official example library with 450+ examples and tutorials
react-spring
- Spring physics is the default, giving motion a natural feel
- Supports both web (react-dom) and react-three-fiber targets
- Offers both declarative and imperative APIs
Not ideal for
Motion
- People who want a visual tool with no coding: the README's visual editor, Motion Studio, is a separate product
- Projects that need only a few CSS transitions, where native CSS may be simpler (general judgment, not stated in the README)
react-spring
- Non-React projects, since the library is built specifically for React
- People who only need simple CSS transitions, which may be easier to write directly
- Beginners with no React experience, since the examples assume working knowledge of React hooks
Trade-offs
Motion
- Some advanced features, including Motion+ content and the Transition editor, are paid
- The README does not describe bundle size or performance numbers beyond general claims
- Formerly Framer Motion; older projects need their imports updated to motion/react
react-spring
- Its README is brief, so deeper usage relies on the external documentation site
- Requires familiarity with React hooks to use effectively
Getting started
Motion
React / JavaScript
npm install motionVue
npm install motion-vreact-spring
Install for web (react-dom)
npm install @react-spring/webInstall for react-three-fiber
npm install @react-spring/threeFrequently asked questions
What is the difference between Motion and react-spring?
Motion: An open source animation library for JavaScript, React and Vue. react-spring: A React animation library built on spring physics for smooth, natural motion. Motion suits react developers who want to animate components with a simple api, while react-spring suits react developers who want fluid, physics-based animations.
Are Motion and react-spring free?
Motion: Free and open source. react-spring: Free and open source.
Is Motion or react-spring more popular?
Motion has more GitHub stars (34.8k) than react-spring (29.3k). Popularity isn't the same as fit — check which one matches your use case above.
What are other alternatives to Motion and react-spring?
Other options people compare them with include mo · js, react-three-fiber, AutoAnimate, React Motion.
Keep comparing
Built from our catalogue entries for both products: open-source details come from each project's README (AI-assisted, refreshed weekly) and GitHub data; AI-tool details are editorial. Spotted something wrong? Let us know from either product's page.