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

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