unfortunately another error, If I use this code I have the problem found in the video I posted in the previous comment
export default function Home() {
const app = useRef();
useLayoutEffect(() => {
const ctx = gsap.context(() => {
gsap.to(".panel", {
xPercent: -100 * ("panel".length - 1),
ease: "none",
scrollTrigger: {
trigger: ".container",
pin: true,
markers: true,
scrub: 1,
end: () => "+=" + document.querySelector(".container").offsetWidth
}
});
}, app);
return () => ctx.revert();
}, []);
return (
<>
<div className="container" ref={app}>
<div className="panel one">ONE</div>
<div className="panel two">TWO</div>
<div className="panel three">THREE</div>
</div>
<div className="last-panel one">LAST</div>
</>
);
}