Skip to content
Get packs

react-spring

A React animation library built on spring physics for smooth, natural motion.

GitHub Download v10.1.2
Stars
29.3k
Forks
1.2k
Licence
MIT
Language
TypeScript
Last update
5 days ago
Type
Library

What it is

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.

  • Fade in a component when a value like isVisible changes
  • Animate an element's position with a spring so it settles naturally
  • Create scroll-in animations tied to a visibility state
  • Animate elements in a react-three-fiber 3D scene using the @react-spring/three package

Great for

  • 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

Not ideal for

  • 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
Step-by-step guide: how to use react-springInstall, first run, examples, tips and FAQs
Motion vs react-springReact Motion vs react-springAutoAnimate vs react-spring

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js and npm · React

    Install for web (react-dom)

    npm install @react-spring/web

    Install for react-three-fiber

    npm install @react-spring/three
  2. 2

    Run it

    • Install the package for your target with npm.
    • Import animated and useSpring from @react-spring/web.
    • Call useSpring with the values you want to animate, such as opacity or y.
    • Pass the returned styles to an animated.div element.
  3. 3

    Get the most out of it

    • Use the documentation site at react-spring.dev for hook references and examples
    • Open the CodeSandbox demo linked in the README to explore a working example
    • Use the imperative API when you need to control animations from event handlers
    • Use @react-spring/three when animating 3D scenes with react-three-fiber

Downloads

Source code (.zip)next branch · straight from GitHubRelease v10.1.2Release notes and sourceOfficial website & docswww.react-spring.dev/

Strengths

  • 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

Trade-offs

  • Its README is brief, so deeper usage relies on the external documentation site
  • Requires familiarity with React hooks to use effectively

How it compares

ProjectStarsTypeLevelUpdatedBest for
react-spring (this)29.3kLibraryintermediate5 days agoReact developers who want fluid, physics-based animations
react-motion21.9kLibraryintermediate2.8 years agoReact developers who want smooth, physics-based UI 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.