title: Horizontal scrolling sticky section with Locomotive scroll
body: <p>Looking to create a horizontal scrolling section inside a sticky div with the following structure using Locomotive scroll framework (<a href="https://github.com/locomotivemtl/locomotive-scroll" rel="nofollow noreferrer">https://github.com/locomotivemtl/locomotive-scroll</a>). My HTML is as follows:</p>
  
  <pre><code>&lt;div id="sec01" class="the-height-400vh-section"&gt;&lt;!-- this has the same height as does the 400vh width, timing should match --&gt;
      &lt;div class="the-sticky-div" id="sticky"  data-scroll data-scroll-sticky data-scroll-target="#sec01"&gt;&lt;!-- this is stickying to viewport while we scroll --&gt;
          &lt;div class="the-overflow-hidden-mask"&gt;
              &lt;div class="the-width-400vh-scrollable-div" data-scroll data-scroll-direction="horizontal" data-scroll-speed="12" data-scroll-target="#sec01"&gt;&lt;!-- we're scrolling this 400vh to the right while we're scrolling the 400vh height of the parent --&gt;
                  &lt;div class="the-content"&gt;
                      &lt;div class="a-block"&gt;&lt;/div&gt;
                      &lt;div class="a-block"&gt;&lt;/div&gt;
                      &lt;div class="a-block"&gt;&lt;/div&gt;
                      &lt;div class="a-block"&gt;&lt;/div&gt;  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the following CSS is applied:</p>
  
  <pre><code>.the-sticky-div {
    position: absolute;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow-x: hidden;
    background: #ccc;
    z-index: 1;
  }
  .the-overflow-hidden-mask {
    position: relative;
    z-index: 200;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #000;
  }
  .the-height-400vh-section {
    position: relative;
    display: flex;
    height: 400vh;
    margin-left: 0px;
    justify-content: center;
    align-items: center;
    border-top: 60px none rgba(36, 36, 36, 0.09);
    background-color: #fff;
  }
  
  .the-width-400vh-scrollable-div {
    display: flex;
    width: 400vh;
    position:relative;
    height: 100%;
    flex-wrap: wrap;
    align-items: center;
    will-change: transform;
  }
  .the-content {
    display: flex;
    width: 100%;
    height: 100%;
    padding-bottom: 10vh;
    justify-content: flex-start;
    align-items: flex-end;
    .a-block {
      overflow: hidden;
      width: 100vw;
      height: 100vh;
      left:0;
      margin-right: 40px;
      margin-left: 40px;
      flex: 0 0 auto;
      border-radius: 6px;
      background-color: hsla(0, 0%, 87.1%, 0.72);
      box-shadow: 0 0 100px 8px rgba(205, 43, 177, 0.25);
    }
  }
  </code></pre>
  
  <p>The logic behind this should be as follows:</p>
  
  <p><a href="https://i.stack.imgur.com/BCFis.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BCFis.png" alt="enter image description here"></a></p>
  
  <p><strong>But I have two main issues:</strong> </p>
  
  <ul>
  <li><p>the horizontal scroll initialises too early</p></li>
  <li><p>the horizontal content slides in from right and is not in the initial position to start scrolling.</p></li>
  </ul>
  
  <p>Any ideas what could be done with the current solution to achieve a similar end result to i.e www.reformcollective.com (sections enter screen, scrolling starts, scrolling ends when last section is viewed).</p>
  
  <p>Thanks in advance</p>