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

Photo by Krisztina Papp 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.

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}…