Coder Social home page Coder Social logo

robinv85 / react-spring Goto Github PK

View Code? Open in Web Editor NEW

This project forked from pmndrs/react-spring

1.0 1.0 0.0 52.15 MB

✌️ A spring physics based React animation library

Home Page: https://www.react-spring.io

License: MIT License

JavaScript 54.83% TypeScript 45.17%

react-spring's Introduction




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.

npm version Join the community on Spectrum Backers on Open Collective Sponsors on Open Collective

Installation

npm install react-spring

Try the beta for v9.0.0:

npm install react-spring@next

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.

react-spring's People

Contributors

aleclarson avatar andarist avatar brunolemos avatar cdebotton avatar chanceeakin avatar drcmda avatar elforastero avatar elindorath avatar gforrest-bw avatar jacobrask avatar jameesy avatar jeef3 avatar jessidhia avatar jigsawye avatar joshwcomeau avatar leonascimento avatar malwilley avatar mvasin avatar obetomuniz avatar omung avatar ooloth avatar pingshunhuangalex avatar precociouslydigital avatar ruggedy avatar salguerooo avatar trysound avatar vai0 avatar vlazh avatar wilcoschoneveld avatar ymyqwe avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.