Animations with React Spring!

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.

---

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:

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.

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:

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:

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.

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

This may be your output:

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.

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:

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 for reading this post!