<div class="container">
  <div class="description panel solid center">
    <div><h1>Horizontal snapping sections (simple)</h1>
      <p class="center">Scroll vertically to scrub the horizontal animation. It will dynamically snap to the sections in an organic way based on the velocity. The snapping occurs based on the natural ending position after momentum is applied.</p>
      <div class="scroll-down">Scroll down<div class="arrow"></div></div>
    </div>
  </div>


  <section class="panel green">
    <h2 class="panel__number">1</h2>
  </section>
  <section class="panel">
    <h2 class="panel__number">2</h2>
  </section>
  <section class="panel purple">
    <h2 class="panel__number">3</h2>
  </section>
  <section class="panel">
    <h2 class="panel__number">4</h2>
  </section>
  <section class="panel red">
    <h2 class="panel__number">5</h2>
  </section>

</div>

body {
  overscroll-behavior: none;
  height: 100vh;
}

.center {
  text-align: center;
}

.container {
  overscroll-behavior: none;
  width: 600%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
}

gsap.registerPlugin(ScrollTrigger);

let sections = gsap.utils.toArray(".panel");

gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".container",
    pin: true,
    scrub: 1,
    snap: 1 / (sections.length - 1),
    // base vertical scrolling on how wide the container is so it feels more natural.
    end: "+=3500",
  }
});