Hello Guys Today i am going to show you how you can use animation in react using react-spring
React-Spring-
react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfaces.
Installation
npm i react-spring
Importing the react spring
import { useSpring, animated } from 'react-spring'
Here we have imported useSpring hook and animated from react-spring
useSpring hook
const styles = useSpring({
loop: true,
from: { rotateZ: 0 },
to: { rotateZ: 180 },
config: {duration:4000}
})
1. Here we have declared a variable called styles in which we have assigned the useSpring hook.
2. Then in the useSpring, the first property is loop which is set to true , it enables the animation to run infinitely, to stop animation after one iteration , set the loop value to false.
3. Then the next 2 properties are "from" and "to", which defines the starting and and ending properties of the animation.
4. Then the next property is config , which defines the duration of the animation how long an animation will play in one iteration, config can also define other values like friction, frequency, etc.Read the document for full description, i have provided the link of react-spring documentation at the end of the post.
Animated tag -
it tie the animated values to your view.
<animated.div
style={{
styles
}}
/>
Here we have passed the styles variable to the style attribute of the animated.div tag and it will tie the animated value to the view.
Full code-
import React from 'react'
import { useSpring, animated } from 'react-spring'
// import Login from './components/Jarvis/Login'
function App() {
const styles = useSpring({
loop:true,
from:{
rotateZ:0
},
to:{
rotateZ:180
},
config:{duration:1500}
})
return (
<animated.div
style={{
width: 80,
height: 80,
backgroundColor: '#46e891',
borderRadius: 16,
...styles}}
/>
)
}
export default App
It will create a rotating cube animation effect
You also noticed that we can pass style properties directly to the animated.div tag and in the end we have passed our styles variable with spread operator(...) to pass all the properties in the useSpring hook.
Documentation -
https://react-spring.io/basics
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION PLEASE MENTION IT IN THE COMMENT SECTION
You can help me by some donation at the link below Thank you 👇👇
☕ - https://www.buymeacoffee.com/waaduheck
Also check these posts
https://dev.to/shubhamtiwari909/text-to-speech-in-reactjs-52ml
https://dev.to/shubhamtiwari909/auto-sizing-columns-in-css-grid-n16
https://dev.to/shubhamtiwari909/best-vs-code-extensions-for-web-development-2lk3
https://dev.to/shubhamtiwari909/helpful-websites-for-frontend-web-development-55a8
Top comments (0)