Animate with the react-spring Library — Trail and Transition Components

Photo by Ugne Vasyliute on Unsplash

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.

Trail

The Trail component is used to animate the first item of a list of elements.

The rest form a natural trail and follow the previous sibling.

For example, we can write:

import React from "react";
import { Trail } from "react-spring/renderprops";
const items = [
  { text: 1, key: 1 },
  { text: 2, key: 2 },
  { text: 3, key: 3 }
];
export default function App() {
  return (
    <div>
      <Trail
        items={items}
        keys={(item) => item.key}
        from={{ transform: "translate3d(0,-40px,0)" }}
        to={{ transform: "translate3d(0,0px,0)" }}
      >
        {(item) => (props) => <div style={props}>{item.text}</div>}
      </Trail>
    </div>
  );
}

We use the Trail component with the items prop to.

It takes an array of data we want to render.

keys takes a function which returns the key value.

from takes an object that lets us apply the styles at the start of the animation.