React Spring

✌️ A spring physics based React animation library
Alternatives To React Spring
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Spring25,7591,4641,33721 hours ago363September 13, 202287mitTypeScript
✌️ A spring physics based React animation library
React Three Fiber22,6911234 days ago147September 23, 202259mitTypeScript
🇨🇭 A React renderer for Three.js
Popmotion19,4304842043 days ago65November 14, 201947JavaScript
Simple animation libraries for delightful user interfaces
Dynamics.js7,248155474 years ago13August 27, 201610CoffeeScript
Javascript library to create physics-based animations
5a year ago8October 22, 20182bsd-2-clauseSwift
Physics-based animations for iOS, tvOS, and macOS.
a day ago233mitTypeScript
A typescript interactive engine, support 2D, 3D, animation, physics, built on WebGL and glTF.
32 years ago3October 09, 20175bsd-2-clauseSwift
Your fast and friendly physics-based animation system.
18 years agoDecember 08, 201415mitJavaScript
Dynamic Physics Interactions for the Mobile Web
22 days ago81zlibC++
Open source C++ physics engine library in 3D
176 years ago3May 21, 2015mitObjective-C
Spring physics for Core Animation.
Alternatives To React Spring
Select To Compare

Alternative Project Comparisons


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:

  • Cross-Platform: We support react-dom, react-native, react-three-fiber, react-konva & react-zdog.
  • Versatile: Be declarative with your animations or if you prefer, imperative.
  • Spring-Physics First: By default animation use springs for fluid interactivity, but we support durations with easings as well.

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

Getting Started

Jump Start

# Install the entire library
npm install react-spring
# or just install your specific target (recommended)
npm install @react-spring/web
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...


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


This project exists thanks to all the people who contribute.

Popular Animation Projects
Popular Physics Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Animation Library