title: Stop horizontal scroll based animation in the middle of the page
body: <p>I found this snippet online, and I'm looking to alter it slightly.</p>
  <pre><code>const scrollText = document.querySelector(&quot;.scroll-text&quot;);
  
      window.addEventListener(&quot;scroll&quot;, () =&gt; {
        scrollText.style.left = `${1000 - 1.5 * scrollY}px`;
  
      });
  </code></pre>
  <p>Right now, I have a heading rolling in from the right side of the screen towards the left side, and it's working smoothly.</p>
  <p>What I'd ideally want though, is for the text to <strong>stop</strong> dead center in the middle of the screen, when the user as scrolled too a certain point down the page.</p>
  <p>Could someone kindly tell me how I'd go about implementing something like this?</p>
  <p>Here's my HTML and CSS as well for good measure.</p>
  <p><strong>HTML:</strong></p>
  <pre><code>&lt;div class=&quot;test&quot;&gt;
      &lt;div class=&quot;main wrapper&quot;&gt;
        &lt;h1 class=&quot;scroll-text&quot;&gt;I'm going too far!&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p><strong>CSS:</strong></p>
  <pre><code>.test {
    background: #ffffff;
    color: #000000;
    overflow-x: hidden;
  }
  
  .wrapper {
    position: relative;
    width: 1150px;
    min-height: 50vh;
    margin: 0 auto;
  }
  
  .main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .main .scroll-text {
    position: relative;
    font-size: 5rem;
    white-space: nowrap;
    scroll-snap-align: center;
  }
  </code></pre>