title: Prevent divs from "jumping" on scroll animation
body: <p>I'm trying to animate two divs to slide into and out of the screen on scroll.  Scroll down and they move outward until they are out of view.  Scroll up and they slide back into view and stop at their original position specified in the CSS (I've used keyframes to achieve this on the page load).  The issue is that the divs jump roughly 500px from their original position as soon as the scroll movement is activated - i.e. the left div will jump over to the right side, then it will move over to the original specified CSS position <strong>instead of starting at that position and moving off screen.</strong>  As it stands, I only have the behavior set up for the left element as an example.   </p>
  
  <p>Unfortunately I'm unable to achieve any scrolling behavior in Codepen, and I don't want to push this live to my site with errors present.  Regardless, here is the code along with a link.  Any suggestions to the wording of the question as well as a solution to the issue are welcome and appreciated. </p>
  
  <p>Here is a video of the issue.  - 
  <a href="https://www.youtube.com/watch?v=G2dAX2fPPN4&amp;feature=youtu.be" rel="nofollow noreferrer">https://www.youtube.com/watch?v=G2dAX2fPPN4&amp;feature=youtu.be</a></p>
  
  <p><a href="https://codepen.io/anon/pen/axpMwZ" rel="nofollow noreferrer">https://codepen.io/anon/pen/axpMwZ</a></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() {
    var $horizontal = $('.about-left');
  
    $(window).scroll(function() {
      var s = $(this).scrollTop(),
        d = $(document).height(),
        c = $(this).height();
  
      scrollPercent = (s / (d - c) * 18);
  
      var position = (scrollPercent * ($(document).width() - $horizontal.width()));
  
      $horizontal.css({
        'right': position
      });
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.main {
    height: 300vh; // maximized to illustrate scroll
    width: auto;
  }
  
  .about-left {
    position: absolute;
    top: 22%;
    left: 18%;
    font-size: 300px;
    color: #15ad93;
    text-shadow: 0px 1px 3px black;
    animation: 1s ease-out 0s 1 slideInFromLeft;
  }
  
  .about-right {
    position: absolute;
    top: 22%;
    right: 18%;
    font-size: 300px;
    color: #15ad93;
    text-shadow: 0px 1px 3px black;
    animation: 1s ease-out 0s 1 slideInFromRight;
  }
  
  @keyframes slideInFromLeft {
    0% {
      transform: translateX(-200%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes slideInFromRight {
    0% {
      transform: translateX(200%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="main"&gt;
  
    &lt;div class="about-left"&gt;[]&lt;/div&gt;
  
    &lt;div class="about-right"&gt;[]&lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>