Customize jQuery easeOutElastic function

Question

I've got a side scrolling web site under jQuery control, with several pages that are thousands of pixels apart, horizontally. I'm using the easeOutElastic function, but the animation happens way to fast and the elastic bounce needs to be dampened. If I increase the duration parameter, the animation slows, but so does the bounce. It seems the duration controls the entire animation.

What I need to do is control the speed of the move and the tightness of the elasticity separately. I've been fiddling with my own copy of that easeOutElastic function in a plugin, but I cannot seem to get it right, not knowing what all the parameters are:

easeOutElastic: function (x, t, b, c, d) {
    var s=1.70158;
    var p=0;
    var a=c;
    if (t==0) return b;  
    if ((t/=d)==1) return b+c;  
    if (!p) p=d*.3;
    if (a < Math.abs(c)) {
        a=c; 
        var s=p/4; 
    }else{
        var s = p/(2*Math.PI) * Math.asin (c/a);
    }
    return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
}

Can any one tell me what the parameters: x, t, b, c, d represent?

I assume (tracing the function):

  t = time // passed from the duration
  d = distance // calculated from the current and move to positions passed from the css 

It looks like when t == 0 the easing function is finished, but what I really need is for the function to return when the velocity of the motion is below some threshold, rather than waiting for time to expire. But where is velocity calculated? ( s ? )

Any help you can give deciphering this would be great!

Answer 1

Might I suggest a work-around? Use two animation calls, one for moving the element most of the distance and one for the final "bounce" effect. That way you can change the duration for the "bounce" effect to look as you want and also have the horizontal scroll motion as fast as you want.

$('#element_id').animate({left : '20px'}, 1000, 'linear', function () {
    $(this).animate({left : '0px'}, 500, 'easeOutElastic');
});

Answer 2

Can any one tell me what the parameters: x, t, b, c, d represent?

x = null (extra parameter not needed for the equations, but necessary for jQuery)
t = current time
b = start value
c = end value
d = duration

source: http://gsgd.co.uk/sandbox/jquery/easing/

where is velocity calculated?

"Velocity" is defined as distance over time. The equation can be represented as a curve. The curve already contains position information at any given moment in time so velocity is not a parameter you'd input (it's an output of the function).

Velocity is also constantly changing (acceleration is defined as a change in velocity over time). All that matters to this equation (curve) is where and when to put something... this ends up being an animated representation (output) containing an infinite number of velocities (or more accurately, "accelerations").

---

You also may be interested in my answer here...

jQuery.easing - easeOutCubic - emphasizing on the ease

---

EDIT:

I think you're having difficulty in manipulating the equation because it needs to be visualized graphically rather than programatically. This online tool makes it easy. Simply draw the curve exactly as you want, preview it and then output your custom function.

You have to click on the tiny image and the tool opens in a popup.

http://laco.wz.cz/tween/?page=customeasing