Docop

First of all, I'm not familiar with using CodePen and since there are multiple components involved, I hope you understand that I'll be sharing a CodeSandbox link instead. I'm making an simple animation in React project with GSAP and Locomotive. but I'm experiencing a problem where the start and end markers are not fixed and move along with the scroll. I think I've done GSAP and Locomotive settings well. The strange thing is that when I scroll in the regular mode of codesandbox, the marker is fixed and works well. But when I click the 'toggle responsive preview' button in codesandbox and refresh, then try scrolling, the marker doesn't stay fixed and moves with the scroll. And in a real local environment outside of codesandbox, the marker also doesn't stay fixed and exhibits the same behavior, moving with the scroll. May I know what's the problem?? CodeSandBox Link: https://codesandbox.io/s/locomotive-gsap-xsq7lf?file=/src/App.js Locomotive setting Code: useEffect(() => { const locoScroll = new LocomotiveScroll({ el: document.querySelector(".container"), smooth: true }); locoScroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(".container", { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: document.querySelector(".container").style.transform ? "transform" : "fixed" }); ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.refresh(); }, []); GSAP Code: useEffect(() => { let tl = gsap.timeline({ scrollTrigger: { trigger: oneRef.current, start: "75% center", end: "105% center", scrub: true, markers: true } }); tl.to(twoRef.current, { x: 300, duration: 5 }); }, []);