title: Animating back and forth based on scroll position
body: <p>I have created a small demo of two boxes animating in and out based on scroll position. But this isn't exactly what I want to achieve. What I want is for the boxes to animate based on scroll position not just transition in and out when a certain point is reached. </p>
  
  <p>For example the scrolling should control the animation so if you scroll down the boxes will animate in, if you scroll up they will animate out. If you stop scrolling mid animation the animation will stop. If you reverse the scroll position the animation will reverse. So the animation only happens as you scroll.</p>
  
  <p>I hope that is clear enough for you to understand. I will try provide a link to what I am trying to achieve. But for now here's my demo just using a transition to animate the boxes.</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>jQuery(document).ready(function($){
   var scroll_pos = $(window).scrollTop();
      var box = $('#container').offset().top - 200;
      
      $(window).on('scroll', function(){
       scroll_pos = $(window).scrollTop();
          
       $('p').html(scroll_pos);
          
          if(scroll_pos &gt;= box){
           $('#left').addClass('animate');
           $('#right').addClass('animate');
          }else{
           $('#left').removeClass('animate');
           $('#right').removeClass('animate');
          }
      });
     
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container{
      width: 600px;
      height: 300px;
      margin: 1000px auto;
      overflow: hidden;
      font-size: 0;
  }
  
  #left{
      width: 55%;
      height: 300px;
      background-color: blue;
      display: inline-block;
      transform: translateX(-100%);
      transition: all 0.5s; 
  }
  
  #right{
      width: 45%;
      height: 300px;
      background-color: yellow;
      display: inline-block;
      transform: translateX(100%);
      transition: all 0.5s; 
  }
  
  #left.animate{
      transform: translateX(0%);
  }
  
  #right.animate{
      transform: translateX(0%);
  }
  
  p{
      position: fixed;
      top: 0;
      left: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;p&gt;&lt;/p&gt;
  
  &lt;div id="container"&gt;
      &lt;div id="left"&gt;&lt;/div&gt;
      &lt;div id="right"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's an example of what I want to achieve. As you can see the scroll controls the animation of the fidget spinner <a href="https://ampbyexample.com/visual_effects/basics_of_scrollbound_effects/" rel="nofollow noreferrer">https://ampbyexample.com/visual_effects/basics_of_scrollbound_effects/</a> </p>