react-spring alternatives and similar libraries
Based on the "UI Animation" category.
Alternatively, view react-spring alternatives based on common mentions on social networks and blogs.
-
-
react-flip-move
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. -
-
-
react-parallax-tilt
👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB) -
-
React Native Circle Menu
:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Reactnative library made by @Ramotion -
react-web-animation
React components for the Web Animations API - http://react-web-animation.surge.sh -
react-transitive-number
React component to apply transition effect to numeric strings, a la old Groupon timers -
react-tween
DISCONTINUED. DEPRECATED - Recommend https://github.com/tannerlinsley/react-move instead! -
-
-
-
anim-react
simple js react animation, animation hook, web Animation interface, onclick animation, onview,onsight animation, without css animation, no transition animation, js animation class usage.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
Do you think we are missing an alternative of react-spring or a related project?
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:
const styles = useSpring({
from: {
opacity: 0
},
to: {
opacity: 1
}
})
<animated.div style={styles} />
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
# Install the entire library
npm install react-spring
# or just install your specific target (recommended)
npm install @react-spring/web
import { animated, useSpring } from '@react-spring/web'
const FadeIn = ({ isVisible, children }) => {
const styles = useSpring({
opacity: isVisible ? 1 : 0,
y: isVisible ? 0 : 24,
})
return <animated.div style={styles}>{children}</animated.div>
}
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.