React Motion
A React animation library that drives motion with spring physics instead of fixed durations.
- Stars
- 21.9k
- Forks
- 1.1k
- Licence
- MIT
- Language
- JavaScript
- Last update
- 2.8 years ago
- Type
- Library
No commits in over a year — check for forks or alternatives before adopting.
What it is
React-Motion is a JavaScript library for animating components in React. Instead of setting a fixed duration and easing curve, you describe a spring with stiffness and damping values, and the animation follows physics, which the README says handles interrupted animations more gracefully. It exports components such as Motion, StaggeredMotion and TransitionMotion for mounting and unmounting animations.
- Animate a counter from 0 to 10 using the Motion component and spring()
- Create a staggered effect where each item follows the previous one using StaggeredMotion
- Animate items entering and leaving a list with TransitionMotion
- Apply interpolated values to a div's style inside a render function
Great for
- React developers who want smooth, physics-based UI animations
- Developers animating a value from one number to another, such as a counter or position
- Teams building staggered list or chat-head style effects
- Developers who need mount and unmount transitions similar to React's TransitionGroup
Not ideal for
- Developers who need exact fixed-duration or custom easing curves, since the library is built around springs rather than durations
- Projects not using React, because the API is built around React components
- Anyone starting a new project who wants the most actively maintained option, since the last push in the provided metadata is from January 2024
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm · React
Install from npm
npm install --save react-motion - 2
Run it
- Install the package with npm install --save react-motion.
- Import Motion and spring from 'react-motion'.
- Wrap a value in Motion with defaultStyle and style set to spring(10).
- Render the interpolated value inside the children function.
- 3
Get the most out of it
- Use the presets object (for example presets.wobbly or presets.gentle) instead of tuning stiffness and damping from scratch
- Pass a precision option to spring() to control rounding and speed of the interpolation
- Use StaggeredMotion when values depend on each other, as in the chat-heads demo
- Explore the Spring Parameters Chooser demo to get a feel for stiffness and damping
- Browse the community demos gallery on the project wiki
Downloads
Strengths
- Animations are driven by stiffness and damping values, so you rarely tune durations by hand
- Includes an API for list mount and unmount transitions and staggered effects
- Typed definitions are available for Flow, and the README links TypeScript definitions
Trade-offs
- The last push shown in the metadata is January 2024, so maintenance activity may be limited
- Spring parameters are hard to predict by feel; the README suggests using the demo tool to experiment
- The README is truncated, so details of TransitionMotion and other APIs are not fully covered here
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| react-motion (this) | 21.9k | Library | intermediate | 2.8 years ago | React developers who want smooth, physics-based UI animations |
| react-spring | 29.3k | Library | intermediate | 5 days ago | React developers who want fluid, physics-based animations |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.