Guide · Open source

How to use react-spring: install, animate and tips

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

react-spring is a JavaScript animation library for React that drives motion with spring physics rather than fixed durations. This guide shows you how to install the right package, write a basic animation with useSpring and animated.div, and decide whether it fits your project. By the end you will be able to fade and slide an element in response to a state change.

react-springpmndrs/react-spring · ★ 29.3k · MIT Install options & downloads

Quick start

1Check prerequisites. Make sure you have Node.js, npm and a React project set up.
2Install the right package. Run npm install @react-spring/web for react-dom, or npm install @react-spring/three for react-three-fiber.
3Import the hooks. Import animated and useSpring from @react-spring/web in the component that will animate.
4Create spring values. Call useSpring with the target values, such as opacity and y, that depend on your state.
5Apply to an animated element. Pass the returned styles to an animated.div through its style prop.
6Toggle state and check the motion. Change the state value that drives the animation and confirm the element moves smoothly.

What react-spring is and who it is for

react-spring is a cross-platform, spring-physics first animation library. 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.

It suits React developers who want physics-based motion, interactive UIs that respond to user input, and projects that need animation in both web (react-dom) and react-three-fiber 3D scenes. It is not for non-React projects, and it assumes working knowledge of React hooks.

Cross-platform: supports react-dom and react-three-fiber
Declarative by default, with imperative control when you need it
Springs by default, with durations and easings also supported

Install react-spring with npm

You need Node.js and npm, plus a React project. Install the package that matches your target. For web (react-dom) use @react-spring/web. For react-three-fiber use @react-spring/three.

npm install @react-spring/web
# or, for react-three-fiber
npm install @react-spring/three

Write your first animation with useSpring

Import animated and useSpring from the package. useSpring returns style values that you pass to an animated element. When the values change, react-spring animates between them. The example below fades and slides a wrapper in and out whenever isVisible changes.

Wrap the element you want to move in animated.div rather than a plain div, so the animated values are applied to it.

import { animated, useSpring } from '@react-spring/web'

const FadeIn = ({ isVisible, children }) => {
  const styles = useSpring({
    opacity: isVisible ? 1 : 0,
    y: isVisible ? 0 : 24,
  })

  return <animated.div style={styles}>{children}</animated.div>
}

Understand from and to values

The README shows a simple form where you give useSpring a from and a to object. The animation runs from the first state to the second. The library's default is spring physics, so the motion settles naturally rather than running for a set time.

from sets the starting values, for example opacity 0
to sets the target values, for example opacity 1
Values can also be passed directly, as in the FadeIn example above

const styles = useSpring({
  from: {
    opacity: 0
  },
  to: {
    opacity: 1
  }
})

<animated.div style={styles} />

Choose between declarative and imperative control

The default approach is declarative: you describe the values and react-spring animates to them. The library also supports imperative control for cases where you need to trigger or steer animations directly. The README describes this as a way to be declarative or imperative depending on your preference.

For full API details, the project documentation at react-spring.dev includes pages with their own examples, including a useSpring demo page.

Troubleshoot common setup problems

If an animation does not appear, first confirm you installed the package that matches your renderer: @react-spring/web for react-dom and @react-spring/three for react-three-fiber. Next, check that the element you animate is an animated component, such as animated.div, and that the style prop receives the values from useSpring.

If you are new to React hooks, review the basics first, because the examples assume that knowledge. The project's documentation site and its linked CodeSandbox examples are the best next step for checking working code.

Wrong package: use @react-spring/web for react-dom, @react-spring/three for react-three-fiber
Plain div instead of animated.div: the values will not drive the element
Missing React hooks knowledge: review useState and component basics first

What people use it for

Fading and sliding an element in when a value like isVisible changes
Adding fluid, physics-based motion to interactive UI responses to user input
Animating objects in react-three-fiber 3D scenes
Mixing declarative animation code with imperative control where needed

Frequently asked questions

How do I install react-spring?

Install it with npm. Run npm install @react-spring/web for react-dom projects, or npm install @react-spring/three for react-three-fiber. You need Node.js, npm and React.

Is react-spring free to use?

react-spring is released under the MIT licence, which is an open-source licence. Check the repository's licence file for the full terms before using it in your project.

What are the requirements for react-spring?

The source lists Node.js and npm, plus React, as prerequisites. The examples also assume working knowledge of React hooks.

What are the alternatives to react-spring?

The source names Framer Motion, React Motion and GSAP as comparable projects. Each has its own API and approach, so compare them against your project needs.

Can react-spring animate 3D scenes?

Yes. The source says react-spring supports react-three-fiber, and you install @react-spring/three for that target.

Why is my react-spring animation not showing?

Check that you installed the package for your renderer, that you are using animated.div rather than a plain div, and that the style prop receives the values from useSpring.

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

Use react-spring if you build React interfaces and want fluid, spring-based motion, or need animation in both web and react-three-fiber 3D scenes. If you are not using React, or you only need simple CSS transitions, pick a simpler option such as plain CSS, since react-spring assumes React hooks knowledge.

Install options & downloads