react-spring

✌️ A spring physics based React animation library

Showing:

Popularity

Downloads/wk

658K

GitHub Stars

21.6K

Maintenance

Last Commit

4d ago

Contributors

141

Package

Dependencies

6

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

React Animation

Reviews

Average Rating

4.6/543
Read All Reviews
vishal-majhi
ankiiitraj
parimalyeole1
sahebrao72
Somesh-Dahatonde
vishnu-dev
akashz19

Top Feedback

14Easy to Use
13Great Documentation
12Highly Customizable
9Performant
5Bleeding Edge
4Responsive Maintainers

Readme




react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfaces.

This library represents a modern approach to animation. It is very much inspired by Christopher Chedeau's animated and Cheng Lou's react-motion. It inherits animated's powerful interpolations and performance, as well as react-motion's ease of use. But while animated is mostly imperative and react-motion mostly declarative, react-spring bridges both. You will be surprised how easy static data is cast into motion with small, explicit utility functions that don't necessarily affect how you form your views.

Build npm version Discord Shield Backers on Open Collective Sponsors on Open Collective

Installation

npm install react-spring

Documentation and Examples

More info about the project can be found here.

Examples and tutorials can be found here.


Why springs and not durations

The principle you will be working with is called a spring, it does not have a defined curve or a set duration. In that it differs greatly from the animation you are probably used to. We think of animation in terms of time and curves, but that in itself causes most of the struggle we face when trying to make elements on the screen move naturally, because nothing in the real world moves like that.

We are so used to time-based animation that we believe that struggle is normal, dealing with arbitrary curves, easings, time waterfalls, not to mention getting this all in sync. As Andy Matuschak (ex Apple UI-Kit developer) expressed it once: Animation APIs parameterized by duration and curve are fundamentally opposed to continuous, fluid interactivity.

Springs change that, animation becomes easy and approachable, everything you do looks and feels natural by default. For a detailed explanation watch this video.

What others say

Used by

And many others ...

Funding

If you like this project, please consider helping out. All contributions are welcome as well as donations to Opencollective, or in crypto:

BTC: 36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH

ETH: 0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682

You can also support this project by becoming a sponsor. Your logo will show up here with a link to your website.

Gold sponsors

Other Sponsors

Backers

Thank you to all our backers! 🙏

Contributors

This project exists thanks to all the people who contribute.

Rate & Review

Great Documentation13
Easy to Use14
Performant9
Highly Customizable12
Bleeding Edge5
Responsive Maintainers4
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
vishal-majhi24 Ratings39 Reviews
3 months ago
Bleeding Edge

I feel that it is one of the most advanced yet simple at the same time animating libraries to come out for react. Before using react-spring, I was not a very big fan of animation. BUt after using it my mind changed. i like the way react-spring makes it possible to use Physics-based animations, unlike CSS.


2
rajrgb
subhadippal66
Ankit RajIIIT Ranchi67 Ratings67 Reviews
8 months ago
Easy to Use
Great Documentation
Performant

It help me lot with built in animations , it's very powerful and animate beyond immagination. it is easy to use and you can achieve amazing results by just few line of code. its documentation is well documented and beginner friendly. Also there aren't any bugs too. The community support is good.


1
pumpkin-codes
Parimal YeolePune73 Ratings81 Reviews
Lang :Node[TS,JS] | Dart | Go | Haskell DB: Mongo | Postgres | Redis | DynamoDb | ElasticSearch Acrhitecture: Micro-service | Serverless AWS Certified
7 months ago
Great Documentation
Easy to Use

I am not a fan of adding animation to the UI, I have mostly worked on the Admin panel side of react application. Most of the time we tend to use the default UI as a component. And when it comes to mass user base applications I had this frustration adding animation, until I found a react-spring library. Great documentation. Great API first-class support for hooks, performant and cross-platform work with web / react-native. And shout out to the creator for managing animation without re-rendering components, that's where we get performance.Pure <3 (love) for React-spring.


0
sahebrao7268 Ratings76 Reviews
7 months ago
Responsive Maintainers
Bleeding Edge
Great Documentation
Easy to Use
Highly Customizable

Adding Animation in reactjs is pretty hard than i expect and frustrating but this library solved my all issues. i'm using this library from last 2 year for my react-app and magically this work amazing for my react app using this i added so many animation in my react-app in just few time. animation are soo good and smooth work with every react-components perfectly. easy to use .


0
Somesh Dahatonde5 Ratings5 Reviews
7 months ago
Highly Customizable
Great Documentation
Performant
Responsive Maintainers
Easy to Use

I'm using this library from last 3 year for my react-app. Adding Animation in reactjs is so hard to me that i expect but this library solved my issue and magically this work amazing for my react app using this i added so many animation in my react-app in just few time. And the animation is work great smooth and in my projects. And its easy to use also


0

Tutorials

No tutorials found
Add a tutorial