Smooth grabbing

Question

I've made a simple grabbing demo page. It doesn't have any easing/acceleration. I would like to do the same easing/acceleration as on kulesh.info (Flash website) using JavaScript. How can I do that?

Any examples of smooth grabbing (scrolling, dragging) in JavaScript would be helpful as well as a language agnostic algorithm.

Answer 1

I think this is the best you can get with jQuery: [Demo]

jQuery.fx.interval = 1; // since v1.4.3
var photos = $(".photos");
var scrollLeft = photos[0].scrollLeft;
var $el = $(photos[0]);
var lastTime = +new Date();


$(window).mousemove(function(event){
    var now = +new Date();
    var elapsed = now - lastTime;
    if (dragging && elapsed > 10) {
        scrollLeft += x - event.clientX;
        $el.stop().animate({scrollLeft:  scrollLeft}, 300, "easeOutCubic");
        x = event.clientX;
        lastTime = +new Date();
    }
});

$(window).mouseup(function(event){
    dragging = false;
    $el.stop().animate({scrollLeft:  scrollLeft}, 500, "easeOutCubic");
});

Note, all the possible (slight) sluggishness can't be corrected at the moment, because it's related to image rendering performance of modern browsers. Test - simple linear animation, no events, no jQuery