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-

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