| 1 | <p align="center">
|
| 2 | <img src="https://i.imgur.com/QZownhg.png" width="240" />
|
| 3 | </p>
|
| 4 |
|
| 5 | <br />
|
| 6 | <br />
|
| 7 | <br />
|
| 8 |
|
| 9 | **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.
|
| 10 |
|
| 11 | This library represents a modern approach to animation. It is very much inspired by Christopher Chedeau's [animated](https://github.com/animatedjs/animated) and Cheng Lou's [react-motion](https://github.com/chenglou/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.
|
| 12 |
|
| 13 | [](https://travis-ci.org/drcmda/react-spring) [](https://badge.fury.io/js/react-spring) [](https://spectrum.chat/react-spring) [](#backers) [](#sponsors)
|
| 14 |
|
| 15 | ### Installation
|
| 16 |
|
| 17 | npm install react-spring
|
| 18 |
|
| 19 | ### Documentation and Examples
|
| 20 | More info about the project can be found [here](https://www.react-spring.io).
|
| 21 |
|
| 22 | Examples and tutorials can be found [here](https://www.react-spring.io/docs/hooks/basics).
|
| 23 |
|
| 24 | ---
|
| 25 |
|
| 26 | ## Why springs and not durations
|
| 27 |
|
| 28 | 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.
|
| 29 |
|
| 30 | <p align="middle">
|
| 31 | <img height="250" src="https://i.imgur.com/7CCH51r.gif" />
|
| 32 | </p>
|
| 33 |
|
| 34 | 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](https://twitter.com/andy_matuschak/status/566736015188963328): *Animation APIs parameterized by duration and curve are fundamentally opposed to continuous, fluid interactivity*.
|
| 35 |
|
| 36 | Springs change that, animation becomes easy and approachable, everything you do looks and feels natural by default. For a detailed explanation watch [this video](https://www.youtube.com/embed/1tavDv5hXpo?controls=0&start=370).
|
| 37 |
|
| 38 | ### What others say
|
| 39 |
|
| 40 | <p align="middle">
|
| 41 | <img src="assets/testimonies.jpg" />
|
| 42 | </p>
|
| 43 |
|
| 44 | ### Used by
|
| 45 |
|
| 46 | <p align="middle">
|
| 47 | <a href="https://nextjs.org/"><img width="285" src="assets/projects/next.png"></a>
|
| 48 | <a href="https://codesandbox.io/"><img width="285" src="assets/projects/csb.png"></a>
|
| 49 | <a href="https://aragon.org/"><img width="285" src="assets/projects/aragon.png"></a>
|
| 50 | </p>
|
| 51 |
|
| 52 | And [many others](https://github.com/drcmda/react-spring/network/dependents) ...
|
| 53 |
|
| 54 | ## Funding
|
| 55 |
|
| 56 | If you like this project, please consider helping out. All contributions are welcome as well as donations to [Opencollective](https://opencollective.com/react-spring), or in crypto:
|
| 57 |
|
| 58 | BTC: 36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH
|
| 59 |
|
| 60 | ETH: 0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682
|
| 61 |
|
| 62 | You can also support this project by becoming a sponsor. Your logo will show up here with a link to your website.
|
| 63 |
|
| 64 | ## Gold sponsors
|
| 65 |
|
| 66 | <a href="https://aragon.org/">
|
| 67 | <img width="300" src="https://wiki.aragon.org/design/logo/svg/imagetype.svg"/>
|
| 68 | </a>
|
| 69 |
|
| 70 | ## Other Sponsors
|
| 71 |
|
| 72 | <a href="https://opencollective.com/react-spring/sponsor/0/website" target="_blank">
|
| 73 | <img src="https://opencollective.com/react-spring/sponsor/0/avatar.svg"/>
|
| 74 | </a>
|
| 75 | <a href="https://opencollective.com/react-spring/sponsor/1/website" target="_blank">
|
| 76 | <img src="https://opencollective.com/react-spring/sponsor/1/avatar.svg"/>
|
| 77 | </a>
|
| 78 |
|
| 79 | ## Backers
|
| 80 |
|
| 81 | Thank you to all our backers! 🙏
|
| 82 |
|
| 83 | <a href="https://opencollective.com/react-spring#backers" target="_blank">
|
| 84 | <img src="https://opencollective.com/react-spring/backers.svg?width=890"/>
|
| 85 | </a>
|
| 86 |
|
| 87 | ### Contributors
|
| 88 |
|
| 89 | This project exists thanks to all the people who contribute.
|
| 90 |
|
| 91 | <a href="https://github.com/drcmda/react-spring/graphs/contributors">
|
| 92 | <img src="https://opencollective.com/react-spring/contributors.svg?width=890" />
|
| 93 | </a>
|