29
Animation with react-spring
Hello Guys Today i am going to show you how you can use animation in react using 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.
npm i react-spring
import { useSpring, animated } from 'react-spring'
Here we have imported useSpring hook and animated from react-spring
const styles = useSpring({
loop: true,
from: { rotateZ: 0 },
to: { rotateZ: 180 },
config: {duration:4000}
})
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.
it tie the animated values to your view.
<animated.div
style={{
styles
}}
/>
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
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
29