Guide · Open source

How to use react-motion: spring animations in React

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

React-Motion is a JavaScript library for animating React components using springs instead of fixed durations and easing curves. This guide shows you how to install it, describe a spring, and use its Motion, StaggeredMotion and TransitionMotion components. By the end you will be able to animate a value from one number to another and understand when the library fits your project.

React Motionchenglou/react-motion · ★ 21.9k · MIT Install options & downloads

Quick start

1Check prerequisites. Confirm that Node.js, npm and React are available in your project.
2Install the package. Run npm install --save react-motion in your project folder.
3Import Motion and spring. Import the Motion component and the spring helper from react-motion.
4Set start and end values. Pass defaultStyle for the starting numbers and style with spring() for the destination.
5Render with the children function. Write a children function that receives the interpolated values and returns one React element.
6Tune the spring if needed. Adjust stiffness, damping or use a preset such as presets.wobbly until the motion feels right.

Install react-motion with npm

React-Motion is installed from npm. You need Node.js and npm, plus React in your project.

The README gives this command for the npm install:

Prerequisites: Node.js, npm and React
The README also lists Bower and a script tag option, but notes that the Bower package must be installed with the bower.zip URL, not the bare package name
The README says it works with React-Native v0.18+

npm install --save react-motion

Animate a value with Motion and spring

The core idea is that you describe where a value should end up and a spring decides how it gets there. Import Motion and spring from the package. The defaultStyle prop sets the starting numbers, and style sets the destination using spring().

The children prop is a required function. It receives the interpolated values on each frame and must return one React element. The README example animates a counter from 0 to 10.

spring(val, config) takes a destination value and an optional config object
stiffness defaults to 170 and damping defaults to 26 according to the README
precision defaults to 0.01 and controls rounding and speed
Presets such as presets.wobbly and presets.gentle can be passed in place of stiffness and damping values

import {Motion, spring} from 'react-motion';

<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>
  {value => <div>{value.x}</div>}
</Motion>

Build staggered effects with StaggeredMotion

StaggeredMotion animates a fixed-length list of items whose values depend on each other. Each spring's destination is the interpolating value of the previous spring, which produces a chain-like effect. The README says this is preferred over hard-coding a delay for an array of Motion components.

The styles prop is a required function, and its name ends in an s. It receives the previous interpolated styles and returns an array of styles.

Use defaultStyles for the starting values of each item
children receives an array of interpolated styles
The README notes there is no onRest prop for StaggeredMotion

<StaggeredMotion
  defaultStyles={[{h: 0}, {h: 0}, {h: 0}]}
  styles={prevInterpolatedStyles => prevInterpolatedStyles.map((_, i) => {
    return i === 0
      ? {h: spring(100)}
      : {h: spring(prevInterpolatedStyles[i - 1].h)}
  })}>
  {interpolatingStyles =>
    <div>
      {interpolatingStyles.map((style, i) =>
        <div key={i} style={{border: '1px solid', height: style.h}} />)
      }
    </div>
  }
</StaggeredMotion>

Animate mounting and unmounting with TransitionMotion

TransitionMotion helps with items that enter and leave a list. When you remove an item from the styles you pass in, TransitionMotion keeps it around and still passes it to the children function, so you can animate it out before removing it for good. The README describes this as an alternative, more powerful API for React's TransitionGroup.

The README's TransitionMotion section is truncated in the source provided, so check the full README for its complete prop list and examples.

Try the demos before you build

The repository includes demos you can run locally. The README lists a simple transition, chat heads, draggable balls, a TodoMVC list transition, a photo gallery, a spring parameters chooser and more. The Spring Parameters Chooser is useful for learning how stiffness and damping feel.

To run them locally, clone the repository and install dependencies. The README says npm start runs a slow development version with hot reloading, while npm run build-demos produces a faster production build. Use production mode when you test performance.

Spring Parameters Chooser: tune stiffness and damping visually
Chat Heads: a StaggeredMotion style effect
TodoMVC List Transition: mount and unmount animation

git clone https://github.com/chenglou/react-motion.git
cd react-motion
npm install

What people use it for

Animating a counter from 0 to 10 with Motion
Moving a draggable element to a new position with interpolated values
Building a chat-head style list where each item follows the one before it with StaggeredMotion
Animating list items in and out with TransitionMotion as an alternative to TransitionGroup

Frequently asked questions

How do I install react-motion?

Run npm install --save react-motion in your project. The README lists this as the npm install method, and you need Node.js, npm and React.

Is react-motion free to use?

The repository is licensed under the MIT licence, as shown on its page. Check the LICENSE file in the repository for the full terms.

Does react-motion work with React Native?

The README says it works with React-Native v0.18+. It is built around React components, so it is not for projects that do not use React.

What is the difference between a spring and a duration-based animation?

React-Motion does not use a fixed duration or easing curve. You set stiffness and damping, and the animation follows physics, which the README says handles interrupted animations more gracefully.

What are good alternatives to react-motion?

The project's comparable projects are Framer Motion, React Spring and GSAP. Choose based on whether you need springs, durations or a larger feature set.

Is react-motion still maintained?

The metadata provided for this analysis shows the last push in January 2024. If you want the most actively maintained option, consider comparing it with the alternatives before starting a new project.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

React-Motion suits React developers who want physics-based, interruptible animations for values, staggered lists and mount and unmount transitions. Pick a different library if you need fixed durations or custom easing curves, if you are not using React, or if you want the most actively maintained option for a new project.

Install options & downloads