//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)
})
Preview:
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