Animate with the react-spring Library — useSprings and useTrail Hooks

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.

useSprings

The useSprings hook lets us create multiple springs each with its own config.

For example, we can write:

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

const items = [
  { text: "foo", opacity: 0.3, id: 1 },
  { text: "bar", opacity: 0.6, id: 2 },
  { text: "baz", opacity: 0.9, id: 3 }
];

export default function App() {
  const springs = useSprings(
    items.length,
    items.map((item) => ({ opacity: item.opacity, from: { opacity: 0 } }))
  );

  return (
    <>
      {springs.map((props, i) => (
        <animated.div style={props} key={i}>
          {items[i].text}
        </animated.div>
      ))}
    </>
  );
}

to create the animation styles for each item with the useSprings hook.

The first argument is the number of style objects to create.

The 2nd argument is an array with the styles we want to apply.

Then in the JSX, we apply the styles by passing in the props to the style prop.

We can also control our animation with the set and stop functions.

For example, we can write:

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

const items = [
  { text: "foo", opacity: 0.3, id: 1 },
  { text: "bar", opacity: 0.6, id: 2 },
  { text: "baz", opacity: 0.9, id: 3 }
];

export default function App() {
  const [springs, set, stop] = useSprings(items.length, (index) => ({
    opacity: items[index].opacity,
    from: { opacity: 0 }
  }));

  return (
    <>
      <button onClick={() => set((index) => ({ opacity: 1 }))}>start</button>
      <button onClick={() => stop()}>stop</button>
      {springs.map((props, i) => (
        <animated.div style={props} key={i}>
          {items[i].text}
        </animated.div>
      ))}
    </>
  );
}

We have the same items array.

And we use the useSpring hook with a function as the 2nd argument instead of an array of styles.

Calling it with a function as the 2nd argument will give us the set and stop functions in addition to springs ,

The set function lets us run the animation with the given style.

And the stop function lets us stop the animation.

Then we display the animated divs the same way.

useTrail

The useTrail lets us create multiple springs with a single config.

For example, we can write:

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

const items = [
  { text: "foo", id: 1 },
  { text: "bar", id: 2 },
  { text: "baz", id: 3 }
];

export default function App() {
  const trail = useTrail(items.length, { opacity: 1, from: { opacity: 0 } });

  return (
    <>
      {trail.map((props, i) => (
        <animated.div style={props} key={i}>
          {items[i].text}
        </animated.div>
      ))}
    </>
  );
}

The first argument is the number of animation style objects to create.

And the 2nd argument is the animation style to create.

Then we can apply them as we do with the useSprings hook.

Conclusion

We can create animations for a group of components with the useSprings and useTrail hooks.