Animations with React Spring!
Tags: react, javascript, webdev, css
Published: 2021-12-22 15:24:37

Hi guys,

Animations are an integral part of any UI and very useful in capturing a users attention. When it comes to React JS, the go-to method of adding animations to elements, popups, and more is by using CSS. However, CSS has its limitations, and that's where spring-based animations come in handy.

Compared to time-based animations in CSS, spring-based animations are far smoother and provide a more natural movement. The most popular and for spring-based animations in React JS is React Spring.

With React Spring, you can easily create amazing animations and add a touch of interactivity to your web development projects. Let's dive further into this library.


> Check out my [blog](https://salehmubashar.com/blog/animations-with-react-spring) too!

----------

## Getting Started

Firstly, you need to install the React Spring library using the following command:

```
npm install react-spring
```
## Hooks
There are five different hooks in React Sring currently, each with its unique function and features:

1. useSpring — A single spring moving an element or value from one point to another.
2. useSprings — Similar to useSpring but with multiple springs and values.
3. useTrail — As the name suggests, many springs which follows the other.
4. useTransition — it is mainly used when items are added or removed, it will animate these changes.
5. useChain — One animation starts after the other in sequence.

## useSpring

useSpring is one of the many hooks that come with React Spring. We will discuss this hook in detail.
In simple terms, this hook **turns values into animated-values**. To start using it, import the hook using the following code:

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

Lets create a simple animation using this. Basically we want a div to fade in when we load the page.. With react spring this can be done very easily.

```javascript
import { React } from "react";
import { useSpring, animated } from 'react-spring'
import "./App.css"

function App() {
  const styles = useSpring({
    from: { opacity: "0" },
    to: { opacity: "1" },
  })
  return (
    <animated.div className="test" style={styles}></animated.div>
  );
}

export default App;
```

Basically, we are creating a styles variable that contains our values for the animation. The initial is defined in the **from** prop. The final value is defined in the **to** prop. The div is written as `animated.div`.  Finally, we add the styles variable to our div using the `style={}` property. The styling of the div itself is done separately in our App.css and it is not of much significance. 
You may notice that it fades in quite fast, we can set the duration using the **config prop**:

```javascript
const styles = useSpring({
    from: { color: "white" },
    to: { color: "cyan" },
    config: { duration: "1500" }
  })
```
Now the animation speed is much slower. You can also turn the animation into a loop using the **loop** prop:

```javascript
const styles = useSpring({
    from: { opacity: "0" },
    to: { opacity: "1" },
    config: { duration: "1500" },
    loop:true
  })
```
Now the animation runs again and again. However you may notice that when it starts again, it is not smooth but abrupt. This can be solved by adding another animation in the chain object so that the div fades in, out and then again fades in smoothly.

```javascript
const styles = useSpring({
    from: { opacity: "0" },
    to: [
      { opacity: "1" },
      { opacity: "0"},
    ],
    config: { duration: "1500" },
    loop:true
})
```

This may be your output:

![Example 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dhcuapjfr6rx7egcz02n.gif)

##Example 2

Lets look at another example with useSpring. Here we want to move the div up and down smoothly. Once again this is very simple. Just replace opacity with transform translate or top.

```javascript
import { React } from "react";
import { useSpring, animated } from 'react-spring'
import "./App.css"

function App() {
  const styles = useSpring({
    from: { transform: "translateY(0%)" },
    to: [
      { transform: "translateY(100%)" },
      { transform: "translateY(0%)"},
    ],
    config: { duration: "1500" },
    loop:true
  })
  return (
    <animated.div className="test" style={styles}></animated.div>
  );
}

export default App;
```

Output:

![Example 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kf62fppu5cpnjf3dftfu.gif)

These simple animations are just a taste of the power of React Spring. You can do fascinating things with this hook and the other hooks too.

------

Thank you all for reading this post!
Check out my other [tutorials](https://discover.hubpages.com/technology/React-Router-V6-The-Main-Changes) on [hubpages](https://hubpages.com/@salehmubashar).
Until next time!
Cheers! 🎉