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

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.

to has an object that lets us apply the styles at the end of the animation.

The render prop is a function that takes the item parameter and returns a function that takes the props parameter and returns the JSX to render.

props has the style that is applied during the animation.

Now we should see the numbers slide down to the page when we mount the component.

Transition

The Transition component animates the component lifecycles as the component mounts, unmounts, or changes.

For example, we can use it by writing:

import React from "react";
import { Transition } from "react-spring/renderprops";

const items = [
  { text: 1, key: 1 },
  { text: 2, key: 2 },
  { text: 3, key: 3 }
];

export default function App() {
  return (
    <div>
      <Transition
        items={items}
        keys={(item) => item.key}
        from={{ transform: "translate3d(0,-40px,0)" }}
        enter={{ transform: "translate3d(0,0px,0)" }}
        leave={{ transform: "translate3d(0,-40px,0)" }}
      >
        {(item) => (props) => <div style={props}>{item.text}</div>}
      </Transition>
    </div>
  );
}

We have the Transition component that takes the items with the items to render.

keys has a function to return the unique key from the object.

from has the styles when we start the animation.

enter has the styles when the items enter the screen.

And leave has the styles when the items leave the screen.

Now we should see the number slide down the screen.

We can also use it to animate toggling between components.

For instance, we can write:

import React, { useState } from "react";
import { Transition } from "react-spring/renderprops";

export default function App() {
  const [toggle, set] = useState(false);

return (
    <div>
      <button onClick={() => set(!toggle)}>toggle</button>
      <Transition
        items={toggle}
        from={{ position: "absolute", opacity: 0 }}
        enter={{ opacity: 1 }}
        leave={{ opacity: 0 }}
      >
        {(toggle) =>
          toggle
            ? (props) => (
                <div style={props}>
                  <span role="img" aria-label="smile">
                    ?
                  </span>
                </div>
              )
            : (props) => (
                <div style={props}>
                  <span role="img" aria-label="smile">
                    ?
                  </span>
                </div>
              )
        }
      </Transition>
    </div>
  );
}

We have the useState hook to create the toggle state.

We toggle that with the toggle button.

In the Transition component, we get the value of the toggle state.

Then we use that value to render the emoticon we want.

The enter and leave styles are set in the enter and leave props.

Conclusion

We can use the Trail component to render animation of multiple the first item with the rest following it.

The Transition component lets us render the component lifecycle.