title: Using GSAP to create horizontal scroll section
body: <p>I'm trying to achieve a <code>section</code> which, when in view, becomes a horizontal scroller until the items in the scroller (in my case, images) are finished, at which point, it becomes a vertical scroller again.</p>
  <p>I've seen and adapted my approach on the following demos:</p>
  <ul>
  <li><a href="https://codepen.io/oldskool123/pen/mdrrbyo" rel="nofollow noreferrer">Horizontal Scroll with GSAP</a></li>
  <li><a href="https://greensock.com/forums/topic/24309-scrolltrigger-horizontal-scrolling/" rel="nofollow noreferrer">ScrollTrigger - Horizontal Scrolling</a></li>
  </ul>
  <p>The asthetic I'm trying to achieve is to show two images by default, then scroll to see rest. See below for a mockup:</p>
  <p><a href="https://i.stack.imgur.com/zZjVq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zZjVq.png" alt="enter image description here" /></a></p>
  <p>Here is my current approach:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
  
    let scroll_tl = gsap.timeline({
      scrollTrigger: {
        trigger: '.horizontalScroller__images',
        start: "top center",
        // pin: true,
        scrub: true,
        end: "+=300",
        // markers: true,
      }
    });
  
    var images = document.querySelectorAll('.horizontalScroller__item');
  
    scroll_tl.to('.horizontalScroller__intro', {
      duration: 1,
      ease: "slow"
    });
  
    scroll_tl.to(images, {
      xPercent: -85 * (images.length - 1),
      scrollTrigger: {
        trigger: ".horizontalScroller__images",
        start: "center center",
        pin: true,
        // horizontal: true,
        // pinSpacing:false,
        markers: true,
        scrub: 1,
        snap: 1 / (images.length - 1),
        // end: () =&gt; `+=4320`
      }
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.spacer{
    height: 300vh;
    background: lightblue;
  }
  
  .horizontalScroller {
    padding: 114px 0 80px 0;
    height: 100vh;
    position: relative;
    background-color: #5d209f;
  }
  .horizontalScroller__intro {
    margin-bottom: 25px;
    color: #FFFFFF;
  }
  .horizontalScroller__header {
    margin-bottom: 17px;
  }
  .horizontalScroller__images {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .horizontalScroller__scroll {
    position: relative;
    overflow: hidden;
    padding: 60px 0;
  }
  /* .horizontalScroller__item {
    width: 25vw;
  } */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js"&gt;&lt;/script&gt;
  
  &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
  
  &lt;div class="spacer"&gt; Scroll down &lt;/div&gt;
  
  &lt;section class="horizontalScroller"&gt;
  
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-12 col-md-8 col-xl-6"&gt;
          &lt;div class="horizontalScroller__intro"&gt;
            &lt;h2 class="horizontalScroller__header"&gt;This is the header&lt;/h2&gt;
            &lt;p class="horizontalScroller__standfirst mb-0"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="horizontalScroller__scroll"&gt;
  
      &lt;div class="horizontalScroller__images" id="horizontal-scroll"&gt;
        &lt;div class="horizontalScroller__item"&gt;
          &lt;img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image"&gt;
        &lt;/div&gt;
        &lt;div class="horizontalScroller__item"&gt;
          &lt;img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image"&gt;
        &lt;/div&gt;
        &lt;div class="horizontalScroller__item"&gt;
          &lt;img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image"&gt;
        &lt;/div&gt;
        &lt;div class="horizontalScroller__item"&gt;
          &lt;img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>In my above demo, you can see that when scrolling in that section, the images move down (not intended) and then they start moving towards the left (whereas the horizontal scroll should move to the right).</p>
  <p>Also, to show the two cards initially, I've tried to set a <code>width</code> to the <code>.horizontalScroller__item</code>, but it just messes it up even more.</p>
  <p>Unsure why my code is performing the way it is, any ideas?</p>