reactjs - How to Stop Parallax With react-rellax-wrapper (React, Rellax)

Question

I am using react-rellax-wrapper to do some parallax animations. I am looking to stop the animation and reset it when it isn't visible in the window. In the documentation for the rellax.js library, you can use the rellax.refresh(); and rellax.destroy(); methods, but since I'm using the wrapper version, I'm not sure how to do this.

Here's my code: https://codesandbox.io/s/simple-rellax-wrapper-4koe8

import "./styles.css";
import RellaxWrapper from "react-rellax-wrapper";
export default function App() {
  return (
    <div className="App">
      <div // i should run first, and stop running when im not visible
        style={{
          overflow: "hidden",
          height: "100vh",
          width: "100%",
          backgroundColor: "rgb(40,40,40)"
        }}
      >
        <RellaxWrapper speed={1} percentage={1}>
          <p>Test1</p>
        </RellaxWrapper>
        <RellaxWrapper speed={2} percentage={2}>
          <p>Test2</p>
        </RellaxWrapper>
        <RellaxWrapper speed={3} percentage={3}>
          <p>Test3</p>
        </RellaxWrapper>
      </div>
      <div // i should run second, and stop running when im not visible
        style={{
          overflow: "hidden",
          height: "100vh",
          width: "100%",
          backgroundColor: "rgb(60,60,60)"
        }}
      >
        <RellaxWrapper speed={1} percentage={1}>
          <p>Test1</p>
        </RellaxWrapper>
        <RellaxWrapper speed={2} percentage={2}>
          <p>Test2</p>
        </RellaxWrapper>
        <RellaxWrapper speed={3} percentage={3}>
          <p>Test3</p>
        </RellaxWrapper>
      </div>
      <div // i should run third, and stop running when im not visible
        style={{
          overflow: "hidden",
          height: "100vh",
          width: "100%",
          backgroundColor: "rgb(80,80,80)"
        }}
      >
        <RellaxWrapper speed={1} percentage={1}>
          <p>Test1</p>
        </RellaxWrapper>
        <RellaxWrapper speed={2} percentage={2}>
          <p>Test2</p>
        </RellaxWrapper>
        <RellaxWrapper speed={3} percentage={3}>
          <p>Test3</p>
        </RellaxWrapper>
      </div>
    </div>
  );
}

question from:https://stackoverflow.com/questions/65896370/how-to-stop-parallax-with-react-rellax-wrapper-react-rellax

Answer 1

Waitting for answers