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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…