Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/pmndrs/react-spring

✌️ A spring physics based React animation library
https://github.com/pmndrs/react-spring

animation-library react react-spring spring-physics springs

Last synced: 3 days ago
JSON representation

✌️ A spring physics based React animation library

Awesome Lists containing this project

README 

        


  








react-spring


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:



```jsx

const styles = useSpring({

  from: {

    opacity: 0

  },

  to: {

    opacity: 1

  }

})



```



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



```shell

# Install the entire library

npm install react-spring

# or just install your specific target (recommended)

npm install @react-spring/web

```



```jsx

import { animated, useSpring } from '@react-spring/web'



const FadeIn = ({ isVisible, children }) => {

  const styles = useSpring({

    opacity: isVisible ? 1 : 0,

    y: isVisible ? 0 : 24,

  })



  return {children}

}

```



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](https://www.react-spring.io).



Pages contain their own [examples](https://react-spring.io/hooks/use-spring#demos) which you can check out there, or [open in codesandbox](https://codesandbox.io/s/github/pmndrs/react-spring/tree/main/demo/src/sandboxes/card) for a more in-depth view!



---



## 📣 What others say





  




## Used by





  

  

  




And [many others...](https://github.com/pmndrs/react-spring/network/dependents)



## Backers



Thank you to all our backers! 🙏 If you want to join them here, then consider contributing to our [Opencollective](https://opencollective.com/react-spring).





  




## Contributors



This project exists thanks to all the people who contribute.