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.

	Stars	Issues	Version	Updated	Created
animejs	48,830	227	3.2.2	6 months ago	8 years ago
popmotion			11.0.5	2 years ago	9 years ago
react-pose			4.0.10	5 years ago	6 years ago
react-spring	27,509	117	9.7.3	8 months ago	6 years ago
react-transition-group	10,080	231	4.4.5	2 years ago	7 years ago

animejs vs popmotion vs react-pose vs react-spring vs react-transition-group

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past