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

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

animation-library react react-spring spring-physics springs

Last synced: about 2 months ago
JSON representation

✌️ A spring physics based React animation library

• Host: GitHub
• URL: https://github.com/drcmda/react-spring
• Owner: pmndrs
• License: mit
• Created: 2018-03-07T15:39:32.000Z (almost 7 years ago)
• Default Branch: main
• Last Pushed: 2024-11-27T00:46:18.000Z (about 2 months ago)
• Last Synced: 2024-11-27T18:54:48.275Z (about 2 months ago)
• Topics: animation-library, react, react-spring, spring-physics, springs
• Language: TypeScript
• Homepage: http://www.react-spring.dev/
• Size: 643 MB
• Stars: 28,258
• Watchers: 192
• Forks: 1,191
• Open Issues: 109
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-star-libs - drcmda / react-spring
• awesome-react-render-props - react-spring - motion and animated to become best friends (Components / Animation)
• Starred-Repo - React Spring
• awesome-react-render-props - react-spring - motion and animated to become best friends (Components / Animation)

README

        


  






react-spring

A spring-physics first animation library 
giving you flexible tools to confidently cast your ideas







  

    

  

  

    

  

  

    

  






`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.