react-spring README

The project's README from github.com/pmndrs/react-spring. As one markdown file: README.md.


react-spring

A spring-physics first animation library
giving you flexible tools to confidently cast your ideas


Chat on Discord


react-spring is a cross-platform spring-physics first animation library.

It's as simple as:

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

<animated.div style={styles} />

Just a small bit about us:

There's a lot more to be had! Give it a try and find out.

Getting Started

⚡️ Jump Start

# Install the target you need
npm install @react-spring/web
# or, for react-three-fiber
npm install @react-spring/three

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>
}

It's as simple as that to create scroll-in animations when value of isVisible is toggled.

📖 Documentation and Examples

More documentation on the project can be found here.

Pages contain their own examples which you can check out there, or open in codesandbox for a more in-depth view!

📣 What others say

Used by

And many others...

Backers

Thank you to all our backers! 🙏 If you want to join them here, then consider contributing to our Opencollective.

Contributors

This project exists thanks to all the people who contribute.

react-spring (pmndrs/react-spring)

Searching Database…

29.2K ·GitHub
React-spring
What is this?react-spring is a spring-physics-based animation library for React, letting you animate values fluidly instead of using fixed-duration easing curves.
Is it a standalone animation tool or a library I import into React?It's a library you import into a React codebase, with hooks for declarative animations or an imperative API if you prefer.
How do I add it to a project?Install the package and use its hooks to animate values that toggle based on state, such as creating scroll-in animations when a value like isVisible changes.
Do I need react-three-fiber or can I just use it with plain React?Plain react-dom is enough; react-three-fiber support is optional for animating 3D scenes.
Am I forced to use spring physics for every animation?No, springs are the default but durations with easing functions are also supported if you don't want physics-based motion.
Does this work outside the browser, like with 3D or native apps?It's cross-platform within the React ecosystem, working with react-dom for web and react-three-fiber for 3D/WebGL scenes.
Why use spring physics instead of CSS transitions or Framer Motion-style easing?Spring physics react naturally to interruptions and changing targets mid-animation, producing fluid, interactive motion instead of rigid timed curves.
Where can I find examples before committing to this library?The documentation site has runnable examples for each page, and most can be opened directly in CodeSandbox for a deeper look.
Is this actively maintained?Yes, the repo has active CI workflows for builds, checks, bundle-size tracking, and docs deployment, with a large community of backers and contributors.
What are similar projects?react-dropzone, Libraries.dev, react-slick, theatre, plasma-ui, shaders, material-ui, Viscose-carousel
Which topics is it in?react-components, hooks, frontend-framework, webgl, 3d, animation, ui, react, frontend, nodejs, library, typescript
Creator
pmndrs
Size
654 MB
Stars
29.2K
Updated
CommitOct 05Releasev10.1.2Jun 24
Age
8y
Commits · 90 Days