DowneyChow

Thank you！ This is the minimal demo in CodeSandbox.

Hello,guys! I am a designer and front-end green hands, learning Gsap and implementing some mouse-scrolling web animations in ReactJS. But it doesn't work when I use it. I hope to get your help. Thank you very much. I expect something similar to this example import "./styles.css"; import { useRef, useEffect } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); export default function App() { const containerRef = useRef(); const pageRef = useRef(); const Container = document.querySelectorAll(".container"); console.log(Container); const Page = document.querySelectorAll(".page"); console.log(Page); useEffect(() => { gsap.to( Page, { xPercent: -100 * (Page.length - 1), ease: "none", scrollTrigger: { trigger: ".container", pin: true, markers: true, end: () => "+=" + Container.offsetWidth } }, [] ); }); return ( <div ref={containerRef} id="container" className="container"> <div className="page" id="red" ref={pageRef}></div> <div className="page" id="green" ref={pageRef}></div> <div className="page" id="blue" ref={pageRef}></div> <div className="page" id="yellow" ref={pageRef}></div> <div className="page" id="pink" ref={pageRef}></div> </div> ); } .App { font-family: sans-serif; text-align: center; } .page { width: 100vw; height: 100vh; } #red { background-color: rgb(202, 62, 62); } #green { background-color: green; } #yellow { background-color: yellow; } #blue { background-color: blue; } #pink { background-color: pink; } .container { display: flex; flex-shrink: 0; width: 500vw; flex-wrap: nowrap; } * { box-sizing: border-box; padding: 0; margin: 0; }