title: Jquery animate css on scrolling causes jitter
body: <blockquote>
    <p>EDIT: The problem was using javascript animations in stead of CSS transitions. The codepen now shows a working example where JS is only used to translate the elements and CSS is used to animate it!</p>
  </blockquote>
  
  <p>I'm trying to achieve a certain effect which I've seen at this website: <a href="https://draft.co.jp/en/projects/page/geechs" rel="nofollow">https://draft.co.jp/en/projects/page/geechs</a>. </p>
  
  <p>They use a fixed positioned main section within a body element that has a fixed height (to generate the scrollbar). After scrolling they translate all elements within the main element in ratio with the $(window).scrollTop(). They use a animation that smooths this effect.</p>
  
  <p>I've been trying to recreate this effect, but my code will generate a jittered experience after a few scrolls. (see <a href="https://codepen.io/blauwhelm/pen/LRorNA" rel="nofollow">https://codepen.io/blauwhelm/pen/LRorNA</a> for an example).</p>
  
  <p>It seems that generating a lot of animations (I'm using transition via a jquery plugin in this example to animate the translate property) is causing this problem. I've already tried using throttling to limit the amount of triggers, but this doesn't fix the problem. </p>
  
  <p>My javascript:</p>
  
  <pre><code>$(document).ready(function() {
  
  var $mainElement = $('.main__element');
  
  function smoothScroller(e) {
      var scrollTop = $(window).scrollTop();  
      console.log('scroll trigger');
      $mainElement.stop(true, false).transition({y: -scrollTop}, 3000, "cubic-bezier(.19,0.88,0,.99)", function() {
          console.log('end animation');
      });
  }
  
  $(window).bind('scroll', smoothScroller);
  });
  </code></pre>
  
  <p>Somehow there are a lot more 'end animation' messages than 'scroll trigger', which I also don't understand.</p>
  
  <p>Anybody any ideas how I can fix the jittery animations?</p>
  
  <p>Thanks!</p>