jQuery elastic easing equation

Question

How can I modify this jQuery easing function to produce a less exaggerated bounce?

$.easing.easeOutElasticSingleBounce = 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;
};

I'm looking to produce an easing function that emulates this:

http://sandbox.scriptiny.com/tinyslider2/

tinyslider2 uses a similar function that looks something like this:

new Function(this.n+'.slide('+(i==1?t+(12*d):t+(4*d))+','+(i==1?(-1*d):(-1*d))+','+(i==1?2:3)+','+a+')')

But I can't seem to get my head around the math today to fit tinyslider2 equation into the jQuery easing format. If someone can show me an example, I would appreciate it very much.

UPDATE

This equation is very close:

$.easing.custom = function (x, t, b, c, d) {
    var s = 1.70158; 
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}

I just need only the ending bounce without the beginning bounce.

Solution 1

http://timotheegroleau.com/Flash/experiments/easing_function_generator.htm allows you to visually create an easing function. If you toggle the F5/FMX radio button in the top right, it gives the output in JavaScript.

Without knowing exactly the effect you want, this should get you pretty close.

$.easing.tinyslider = function(x, t, b, c, d) {    
    ts=(t/=d)*t;
    tc=ts*t;
    return b+c*(-8.1525*tc*ts + 28.5075*ts*ts + -35.105*tc + 16*ts + -0.25*t);
}

Otherwise fiddle around with the easing function generator and try new options or look up http://commadot.com/jquery/easing.php for more resources.

jsfiddle

http://jsfiddle.net/XRF6J/

This was fun to answer, I always wanted to find out how those easing functions worked.

Solution 2

Did you try the jQuery easing plugin?

It adds a lot of new easings (you can try them on the website).

If you can use graceful degradation, I suggest you to take a look at CSS transitions. It’s hardware accelerated, and you can use predefined or custom (with a bezier curve) transitions.

Solution 3

I know this is pretty old, but I needed to make the exact same effect and I used a combination of two easing functions in UI quite successfully.

A linear animation for 95% of the transition at 95% of the 'time', then an elastic animation over the remaining 5% at 5% of the 'time' times 16 (this just seemed to look right - a lot of the animation time for this effect is devoted to bouncing around so it needs to be considerably longer).

d = [transition 'distance' or whatever];
t = [transition time ms]

da = d * 0.95;
db = d * 0.05;

ta = t * 0.95;
tb = (t * 0.05) * 16;

var anima = {left: "+="+da+"px"};
var animb = {left: "+="+db+"px"};

$(element).animate(anima,ta).animate(animb,tb);

Quite the workaround, but I couldn't create a bezier formula and I was tearing my hair out trying.

Comments

[Devon]

I did. And that is the source of the equation above. It was the closest one I could find to what I am looking for. But none of them were quite right.

[Devon]

Thanks! The function generator let me tune it to exactly what I wanted.