Creating custom jQuery easing animations

Submitted by Brian on February 11, 2013 - 5:40pm

custom easing

As a fundamental jQuery plugin for almost every project, the easing plugin makes for simple and lightweight animation piece for a variety of uses. With its huge library of animations, one can find something for just about every application. While I was developing this site, I was creating a homepage slide that I was looking to create an animation to give it a ‘bobbing’ or ‘floating’ effect. The closest that I could find already part of the plugin was EaseOutElastic. Unfortunately this was far too aggressive and didn’t simulate the feeling I was hoping to display. Therefore, time to create my own function: If you look at the jQuery.easing.method() structure that is directly on the plugins homepage it looks like this:

jQuery.easing.method( 	
null†,
current_time,
start_value,
end_value,
total_time )

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

Now, here is what the easing function for EaseOutElastic looks like based off of Robert Penner Easing Equation:

Math.easeOutElastic = function (t, b, c, d, a, p) {
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;
};

Now we could go through this whole process of doing the math.. or we could make it easy and use the Easing Function Generator. This is an old script built for Actionscript, but there is a JS option (selecting the F5 option) and with a few syntax edits we get convert it into an easing function for jQuery.

Here is the default EaseOutElastic with actual numbers:

function(t, b, c, d) {
var ts=(t/=d)*t;
var tc=ts*t;
return b+c*(33*tc*ts + -106*ts*ts + 126*tc + -67*ts + 15*t);
}

and after changing the points to get the graph to look how I wanted it (bobbing/float affect) it looks like this (adjusted numbers for simple math):

function(t, b, c, d) {
var ts=(t/=d)*t;
var tc=ts*t;
return b+c*(25.8*tc*ts + -78.5*ts*ts + 89.6*tc + -47.4*ts + 11.50*t);
}

Now all we need to do is format that correctly to tie into easing plugin and add the x variable for jquery to work:

$.easing.bw = function(x, t, b, c, d) {
ts=(t/=d)*t;
tc=ts*t;
return b+c*(25.8*tc*ts + -78.5*ts*ts + 89.6*tc + -47.4*ts + 11.50*t);

}