Andree Luong

I'm new to GreenSock and I encountered a rather confusing error when using scroll triggers with reactjs. Same JSX code but I get two different results on Codeandbox and on vscode, I'm not sure if this is a bug on my dev environment so here is the video I recorded the error: https://streamable.com/m0kvca here is my code on Codeandbox, everything is very similar and there is no difference but the result is different: :Codeandbox link here is my code in app.js file import React, { useEffect, useState, useRef } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); function App() { const menuRef = useRef(null); const leftRef = useRef(null); useEffect(() => { (async () => { const LocomotiveScroll = (await import("locomotive-scroll")).default; const locomotiveScroll = new LocomotiveScroll(); })(); }, []); useEffect(() => { const menuElement = menuRef.current; const leftElement = leftRef.current; if (menuElement && leftElement) { ScrollTrigger.create({ trigger: menuElement, start: "top top", end: "bottom bottom", pin: leftElement, markers: true, }); ScrollTrigger.refresh(); } }, []); return ( <div> <div style={{ height: "50vh" }}></div> <div> <div ref={menuRef} style={{ display: "flex", border: "2px", borderStyle: "solid", gap: "20px", }} > <div ref={leftRef} style={{ width: "30%", height: "50vh", backgroundColor: "#ff0" }} > <div style={{ padding: "20px" }}>1</div> <div style={{ padding: "20px" }}>2</div> <div style={{ padding: "20px" }}>3</div> <div style={{ padding: "20px" }}>4</div> <div style={{ padding: "20px" }}>5</div> </div> <div style={{ width: "70%" }}> <div style={{ height: "50vh", background: "#ddd" }}></div> <div style={{ height: "50vh", background: "#ff0" }}></div> <div style={{ height: "50vh", background: "#0ff" }}></div> <div style={{ height: "50vh", background: "#0f0" }}></div> <div style={{ height: "50vh", background: "#333" }}></div> </div> </div> </div> <div style={{ height: "50vh", background: "#333" }}>1</div> <div style={{ height: "50vh", background: "#555" }}>2</div> <div style={{ height: "50vh", background: "#777" }}>3</div> <div style={{ height: "50vh", background: "#999" }}>4</div> </div> ); } export default App; làm ơn giúp tôi