React-spring

A spring physics based React animation library

ReactAnimationPhysics
pmndrs/react-springreact-spring.io/react-spring

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:

  1. ``` js
  2. const styles = useSpring({
  3.   from: {
  4.     opacity: 0
  5.   },
  6.   to: {
  7.     opacity: 1
  8.   }
  9. })

  11. <animated.div style={styles} />
  12. ```

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


  1. ``` sh
  2. # Install the entire library
  3. npm install react-spring
  4. # or just install your specific target (recommended)
  5. npm install @react-spring/web
  6. ```

  1. ``` js
  2. import { animated, useSpring } from '@react-spring/web'

  4. const FadeIn = ({ isVisible, children }) => {
  5.   const styles = useSpring({
  6.     opacity: isVisible ? 1 : 0,
  7.     y: isVisible ? 0 : 24
  8.   })

  10.   return <animated.div style={styles}>{children}</animated.div>
  11. }
  12. ```

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.

Pages contain their own examples which you can check out there, or open in codesandbox for a more in-depth view!


📣  What others say



Used by



And many others...

Backers


Thank you to all our backers! 🙏 If you want to join them here, then consider contributing to our Opencollective.


Contributors


This project exists thanks to all the people who contribute.