Animate with the react-spring Library — Parallax Scrolling and Performance

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.

Parallax

The Parallax component lets us create a scroll container.

Inside it, we add the ParallaxLayer component to let react-spring take care of moving them.

For example, we can write:

import React from "react";
import { Parallax, ParallaxLayer } from "react-spring/renderprops-addons";

export default function App() {
  return (
    <div>
      <Parallax
        pages={2}
        scrolling={false}
        horizontal
        ref={(ref) => (this.parallax = ref)}
      >
        <ParallaxLayer
          offset={0}
          speed={0.1}
          onClick={() => this.parallax.scrollTo(1)}
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center"
          }}
        >
          <img
            src="https://i.picsum.photos/id/23/200/300.jpg?hmac=NFze_vylqSEkX21kuRKSe8pp6Em-4ETfOE-oyLVCvJo"
            style={{ width: "20%" }}
          />
        </ParallaxLayer>

<ParallaxLayer
          offset={1}
          speed={0.1}
          onClick={() => this.parallax.scrollTo(0)}
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center"
          }}
        >
          <img
            src="https://i.picsum.photos/id/24/200/300.jpg?hmac=UogR0hFxP5yLDwcZpCawObw8Bzm9vnzci_7eMrbqn_s"
            style={{ width: "40%" }}
          />
        </ParallaxLayer>
      </Parallax>
    </div>
  );
}

to add images into our page.

When we click it, the this.parallax.scrollTo method runs, and we’ll go to the image with the given offset.

Improve Performance

We can improve performance with various tweaks.

We can add the native flag with expensive animations to improve animation performance.

For example, we can write:

import React from "react";
import { Spring, animated } from "react-spring/renderprops";

export default function App() {
  return (
    <div>
      <Spring native from={{ opacity: 0 }} to={{ opacity: 1 }}>
        {(props) => <animated.div style={props}>hello</animated.div>}
      </Spring>
    </div>
  );
}

We add the native prop to improve the performance of our animation.

This prop can also be used for inner text animation:

import React from "react";
import { Spring, animated } from "react-spring/renderprops";

export default function App() {
  return (
    <div>
      <Spring native from={{ number: 0 }} to={{ number: 1 }}>
        {(props) => <animated.div>{props.number}</animated.div>}
      </Spring>
    </div>
  );
}

And we can use it with scrolling animation:

import React from "react";
import { Spring, animated } from "react-spring/renderprops";

export default function App() {
  return (
    <div>
      <Spring native from={{ scroll: 0 }} to={{ scroll: 250 }}>
        {(props) => (
          <animated.div
            scrollTop={props.scroll}
            style={{ overflowY: "scroll", height: 300 }}
          >
            {Array(100)
              .fill()
              .map((_, i) => (
                <p key={i}>{i}</p>
              ))}
          </animated.div>
        )}
      </Spring>
    </div>
  );
}

We can also use it with Trail and Transition components.

Interpolation

We can also use the native prop with interpolation.

For example, we can write:

import React from "react";
import { Spring, animated, interpolate } from "react-spring/renderprops";

export default function App() {
  return (
    <div>
      <Spring
        native
        from={{ o: 0, xyz: [0, 0, 0], color: "red" }}
        to={{ o: 1, xyz: [10, 20, 5], color: "green" }}
      >
        {({ o, xyz, color }) => (
          <animated.div
            style={{
              color,
              background: o.interpolate((o) => `rgba(210, 57, 77, ${o})`),
              transform: xyz.interpolate(
                (x, y, z) => `translate3d(${x}px, ${y}px, ${z}px)`
              ),
              border: interpolate(
                [o, color],
                (o, c) => `${o * 10}px solid ${c}`
              ),
              padding: o
                .interpolate({ range: [0, 0.5, 1], output: [0, 0, 10] })
                .interpolate((o) => `${o}%`),
              opacity: o.interpolate([0.1, 0.2, 0.6, 1], [1, 0.1, 0.5, 1])
            }}
          >
            {o.interpolate((n) => n.toFixed(2))}
          </animated.div>
        )}
      </Spring>
    </div>
  );
}

We pass in a function to let us interpolate the styles for animation with the interpolate method.

And we add the native prop to speed that up.

Conclusion

We can add the native prop to speed up our react-spring animation.

Also, we can add parallax scrolling with the Parallax component.