Animate with the react-spring Library — useSpring Hook

With the react-spring library, we can render animations in our React app easily.

In this article, we’ll take a look at how to get started with react-spring.

useSpring

We can use the useSpring hook to add our animation.

For example, we can write:

import React, { useEffect, useState } from "react";
import { useSpring, animated } from "react-spring";

export default function App() {
  const [props, set, stop] = useSpring(() => ({ opacity: 1 }));
  const [toggle, setToggle] = useState();

  useEffect(() => {
    set({ opacity: toggle ? 1 : 0 });
  }, [toggle]);

  return (
    <>
      <button onClick={() => setToggle(!toggle)}>start</button>
      <button onClick={() => stop()}>stop</button>
      <animated.div style={props}>i will fade</animated.div>
    </>
  );
}

We pass in callback into the useSpring hook to create our animation.

We also have the toggle state to let us toggle the opacity with the set function.

So when we click start, we’ll see the fading of the text toggled.

And we have the stop function to stop the animation.

We can also use the useSpring by passing in an object.

For example, we can write:

import React from "react";
import { useSpring, animated } from "react-spring";

export default function App() {
  const props = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1, color: "red" }
  });

  return (
    <>
      <animated.div style={props}>i will fade</animated.div>
    </>
  );
}

We animate from the styles with the from property to the styles in the to property.

We can shorten this to:

import React from "react";
import { useSpring, animated } from "react-spring";

export default function App() {
  const props = useSpring({
    from: { opacity: 0 },
    opacity: 1,
    color: "red"
  });

  return (
    <>
      <animated.div style={props}>i will fade</animated.div>
    </>
  );
}

Async Chains and Scripts

We can animate asynchronously with the next function.

For instance, we can write:

import React from "react";
import { useSpring, animated } from "react-spring";

export default function App() {
  const props = useSpring({
    to: async (next, cancel) => {
      await next({ opacity: 1, color: "#ffaaee" });
      await next({ opacity: 0, color: "rgb(14,26,19)" });
    },
    from: { opacity: 0, color: "red" }
  });

  return (
    <>
      <animated.div style={props}>i will fade</animated.div>
    </>
  );
}

The to method is an async function that has the next and cancel functions as parameters.

next lets us set the styles we want to apply in our animation.

And cancel lets us cancel the animation.

from is still an object with the initial styles of our div.

Also, we can create the to property with an array by writing:

import React from "react";
import { useSpring, animated } from "react-spring";

export default function App() {
  const props = useSpring({
    to: [
      { opacity: 1, color: "#ffaaee" },
      { opacity: 0, color: "rgb(14,26,19)" }
    ],
    from: { opacity: 0, color: "red" }
  });

  return (
    <>
      <animated.div style={props}>i will fade</animated.div>
    </>
  );
}

The array has objects with the styles we want to apply.

Conclusion

The useSpring hook lets us create animations easy for a single element.