react-spring is a set of simple, spring-physics based primitives (as in building blocks) that should cover most of your UI related animation needs once plain CSS can't cope any longer. Forget easings, durations, timeouts and so on as you fluidly move data from one state to another. This isn't meant to give each and every problem a specific solution, but rather to give you tools flexible enough to confidently cast your ideas into moving interfaces, or introduce motion to the static.
npm install react-spring
Hooks: react-spring-hooks.surge.sh
Render-props: react-spring.surge.sh
The most basic principle you will be working with is called a spring. A spring does not have a curve, it does not have a duration, it is physics based! Think of a weight attached to a spring:
Let the weight loose and it rushes down, coming to rest when the force is overcome. Yank the spring up and it will expend its energy and move up according to its momentum. Time based animation on the other hand would have it drop down in an arbitrary timeframe, say 2 seconds. Pull up mid-air and it would stop naively, then move back 2 seconds again. No matter which curve you choose, it will never look natural.
Durations and easings are the number one reason UI animation is hard, and usually looks bad. We are so used to it that we don't question it any longer. We think it is just the way it is when we have to deal with curves, easings, time waterfalls, not to mention getting this all in sync.
Springs change that, they make animation easy and approachable, everything you do with them is fluid by default. Watch the next couple of minutes of this video in which Cheng Lou (the author of react-motion) explains it perfectly.
And many others ...
If you like this project, please consider helping out. All contributions are welcome as well as donations to Opencollective, or in crypto: 36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH (BTC) or 0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682 (ETH).
You can also support this project by becoming a sponsor. Your logo will show up here with a link to your website.
Thank you to all our backers! 🙏
This project exists thanks to all the people who contribute.
