Preview:
//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)
})
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter