Animation with react-spring
Tags: html, react, tutorial, css
Published: 2021-12-24 06:06:47

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

```javascript
import { useSpring, animated } from 'react-spring'
```

Here we have imported useSpring hook and animated from react-spring

##useSpring hook
```javascript
  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.

```javascript
 <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-
```javascript
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