<div class="container">
<div class="description panel blue">
<div><h1>"labelsDirectional" snapping sections</h1>
<p>Scroll vertically to scrub the horizontal animation. It snaps to the sections based on which direction you're scrolling whereas the typical snap: "labels" would require you to drag past halfway to snap to the next section.</p>
<div class="scroll-down">Scroll down<div class="arrow"></div></div>
</div>
</div>
<section class="panel red">
ONE
</section>
<section class="panel orange">
TWO
</section>
<section class="panel purple">
THREE
</section>
<section class="panel green">
FOUR
</section>
<section class="panel gray">
FIVE
</section>
</div>
<header>
<a href="https://greensock.com/scrolltrigger">
<img class="greensock-icon" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/scroll-trigger-logo-light.svg" width="200" height="64" />
</a>
</header>
gsap.registerPlugin(ScrollTrigger);
let sections = gsap.utils.toArray(".panel"),
count = sections.length - 1,
duration = 1,
tl = gsap.timeline({
scrollTrigger: {
trigger: ".container",
pin: true,
scrub: 1,
snap: "labelsDirectional",
end: () => "+=" + document.querySelector(".container").offsetWidth
}
});
// add a label at each section
sections.forEach((section, i) => tl.add("label" + i, i * (duration / count)));
tl.to(sections, {
xPercent: -100 * count,
duration: duration,
ease: "none"
});