title: animate to right on scroll down and animate back to the left on scroll up
body: <p>I'm trying to do an animation on page scroll where selected element will animate from left to right on scroll down and if back to top then animate the selected element from right to left (default position), here's what I tried</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>$(document).ready(function() {
    $(window).scroll(function() {
      var wS = $(this).scrollTop();
  
      if (wS &lt;= 10) {
  
        $("#test-box").animate({
          'left': 100
        }, 500);
  
      }
      if (wS &gt; 11) {
  
        $("#test-box").animate({
          'left': $('#main-container').width() - 100
        }, 500);
  
  
      }
  
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#main-container {
    width: 100%;
    overflow: auto;
    height: 500px;
  }
  
  #test-box {
    background: red;
    color: #ffffff;
    padding: 15px;
    font-size: 18px;
    position: fixed;
    left: 100;
    top: 10;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="main-container"&gt;
    &lt;div id="test-box"&gt;test&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, on scroll down, the test box moves as I instruct but when scroll up, it does not go to the left as default, any ideas, help please?</p>