javascript - smooth scrolling animation distance over time -

i'm trying create smooth endless animation using javascript manipulate translate , i'm having hard time developing formulate dynamic speed acceleration , deceleration

this have far

function run() {     //stride();     = date.now();     var  delta = (now - time) / 1000;     draw(delta);     time = now;     if(streets.y1 >= h)  streets.y1 = 0 - h + 1;     else if(streets.y2 >= 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)'; } 

can give me pointers or steer me tutorial.

thanks

doing kind of animation hand sucks. recommend using 3rd-party library have focus on making awesome stuff happen , not annoying stuff.

the best 1 (by far) greensock's gsap.

seriously, check out. super simple use.