Repository files navigation

react-spring is a cross-platform spring-physics first animation library.

It's as simple as:

conststyles=useSpring({from:{opacity:0},to:{opacity:1}})<animated.divstyle={styles}/>

Just a small bit about us:

• Cross-Platform: We supportreact-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.

# Install the entire librarynpm install react-spring# or just install your specific target (recommended)npm install @react-spring/web

import{animated,useSpring}from'@react-spring/web'constFadeIn=({ isVisible, children})=>{conststyles=useSpring({opacity:isVisible ?1 :0,y:isVisible ?0 :24,})return<animated.divstyle={styles}>{children}</animated.div>}

It's as simple as that to create scroll-in animations when value ofisVisible is toggled.

More documentation on the project can be foundhere.

Pages contain their ownexamples which you can check out there, oropen in codesandbox for a more in-depth view!

Andmany others...

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

This project exists thanks to all the people who contribute.