//HTML
<section id="page-1"></section>
<section id="page-2"></section>
<section id="page-3"></section>
//CSS
sections{
height: 100%;
width: 100%;
}
//JS
let container = document.querySelector(".container");
let sections = gsap.utils.toArray("section");
let horizontal = gsap.timeline({
defaults: {
ease: "none"
},scrollTrigger: {
trigger: container,
pin: true,
scrub: 2,
end: () => "+=" + container.offsetWidth
}
})
horizontal.to(panels, {
xPercent: -100 * (sections.length -1)
})