Repolode
Submit
pmndrs

pmndrs/react-spring

A spring-physics based animation library for React that animates DOM and react-three-fiber elements declaratively or imperatively.

View on GitHubWebsite
Stars
29,261
Forks
1,234
Open issues
79
Last commit
5 days ago

What is it?

react-spring is an animation library for React built around spring physics rather than fixed durations. You describe the target values of a component's styles, and the library animates from the current values toward them using a spring, so motion stays fluid when interrupted or retargeted mid-animation. Durations with easing curves are also supported when a fixed timing is preferred.

The library ships separate packages for different rendering targets. @react-spring/web animates React DOM elements through an animated wrapper component, while @react-spring/three targets react-three-fiber scenes. Animations can be written declaratively with hooks such as useSpring, or driven imperatively when finer control is needed.

The project is written in TypeScript and distributed on npm. Its documentation site includes live examples for each hook, and the repository hosts a demo app with sandboxes that can be opened in CodeSandbox.

Key features

  • 01Spring-based animations that stay fluid when interrupted or retargeted.
  • 02Supports both React DOM via @react-spring/web and react-three-fiber via @react-spring/three.
  • 03Declarative hooks such as useSpring, plus imperative control when needed.
  • 04Optional duration-based animations with easing curves.
  • 05Written in TypeScript and published on npm.

Use cases

  • Adding scroll-in or fade-in transitions to React components.
  • Animating UI state changes such as toggles, expansions, or drag interactions.
  • Animating 3D objects in a react-three-fiber scene.

Quick start

  1. 1

    Install the web target

    npm install @react-spring/web
  2. 2

    Import animated and useSpring and wrap an element with animated.div

Topics

#react#animation#spring-physics#typescript#frontend-animation#three-js#animation-library#react-spring#springs

FAQ

What is react-spring?
A spring-physics based animation library for React that animates DOM and react-three-fiber elements declaratively or imperatively. react-spring is an animation library for React built around spring physics rather than fixed durations. You describe the target values of a component's styles, and the library animates from the current values toward them using a spring, so motion stays fluid when interrupted or retargeted mid-animation. Durations with easing curves are also supported when a fixed timing is preferred.
Is react-spring free to use? What license does it have?
react-spring is open source under the MIT license. Check the license terms before using it in commercial products.
Is react-spring still maintained?
Actively maintained. The last commit to react-spring was on Nov 1, 2026.
What can I use react-spring for?
Adding scroll-in or fade-in transitions to React components. Animating UI state changes such as toggles, expansions, or drag interactions. Animating 3D objects in a react-three-fiber scene.
How do I install react-spring?
Install the web target: npm install @react-spring/web Import animated and useSpring and wrap an element with animated.div
Where can I get react-spring?
The source code and installation instructions are on GitHub: https://github.com/pmndrs/react-spring

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects