//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