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

  <section class="panel red">
  <section class="panel orange">
  <section class="panel purple">
  <section class="panel green">
  <section class="panel gray">


  <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" />
.container {
  width: 600%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;

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"

External CSS

  1. https://codepen.io/GreenSock/pen/7ba936b34824fefdccfe2c6d9f0b740b.css

External JavaScript

  1. https://assets.codepen.io/16327/gsap-latest-beta.min.js
  2. https://assets.codepen.io/16327/ScrollTrigger.min.js
  3. https://codepen.io/GreenSock/pen/7ba936b34824fefdccfe2c6d9f0b740b.js