title: smooth scrolling animation distance over time
body: <p>I'm trying to create a smooth endless animation using javascript to manipulate translate and I'm having a hard time developing the formulate for a dynamic speed with acceleration and deceleration </p>
  
  <p>This is what I have so far</p>
  
  <pre><code>function run() {
      //stride();
      now = Date.now();
      var  delta = (now - time) / 1000;
      draw(delta);
      time = now;
      if(streets.y1 &gt;= h)  streets.y1 = 0 - h + 1;
      else if(streets.y2 &gt;= h) streets.y2 = 0 - h + 1;
  
      requestAnimationFrame(run);
  }
  
   function draw(delta)
  {
    var old_y = streets.y1;
    var n = old_y + delta;
    streets.y1 += Math.abs(n - old_y) * 25.8;
    street[0].style[ $.fx.cssPrefix + 'transform' ] = 'translate(0,'+ Math.round(streets.y1) +      'px)';
    var old_y = streets.y2;
    var n = old_y + delta;
    streets.y2 += Math.abs(n - old_y) * 25.8;
    street[1].style[ $.fx.cssPrefix + 'transform' ] = 'translate(0,'+ Math.round(streets.y2) +'px)';
  }
  </code></pre>
  
  <p>Can anyone just give me some pointers or steer me to a tutorial. </p>
  
  <p>Thanks</p>