Creating Horizontal Scroll with GSAP ScrollTrigger in Next.js

.scroll-container {
width: 100%;
min-height: 100vh;
display: flex;
overflow-x: auto;
scroll-snap-type: x proximity;
}

.scroll-item {
flex: 0 0 auto;
width: 100vw;
height: 100vh;
scroll-snap-align: start;
}

gsap.registerPlugin(ScrollTrigger);

gsap.to(‘.scroll-item’, {
x: () => -(document.documentElement.offsetWidth – window.innerWidth) * (document.querySelector(‘.scroll-container’).scrollLeft / (document.querySelector(‘.scroll-container’).scrollWidth – document.documentElement.offsetWidth)),
ease: ‘none’,
scrollTrigger: {
trigger: ‘.scroll-container’,
start: ‘top top’,
end: ‘bottom bottom’,
scrub: 1
},
overwrite: ‘auto’
});