3

I need a rather atypical jquery easing function. It's basically the opposite of your traditional easeInOut easing because I want the process to go from a fast intro to a slower middle part to a fast outro (you might call it speedInOut).

Unfortunately my math is a little rusty and I need someone to point me in the right direction in terms of how to get started.

A hyperbolical sinus curve (sinh) goes somewhat in the right direction of what I'm looking for , but I need it limited between 0 and 1 on both axis.

Here is the jquery easing function skeleton I'm working with

$.easing.speedInOut = function(t, millisecondsSince, startValue, endValue, totalDuration) {
     if(t = 0) return startValue;
     if(t = 1) return startValue + endValue;
     // custom function should go here
};

Any help would be greatly appreciated!

ximi
  • 596
  • 5
  • 17
  • One of my brilliant colleagues came up with this: sinh((x - 0.5) * 10) + sinh(5)) / (sinh(5) * 2 [see it rendered out on wolfram alpha](http://www.wolframalpha.com/input/?i=plot%28f%28x%29+%3D+%28sinh%28%28x+-+0.5%29+*+10%29+%2B+sinh%285%29%29+%2F+%28sinh%285%29+*+2%29%2C+x+%3D+%5B0%2C+1%5D%29) This is already very close to what I want, it just slows down a bit too much in the middle part – ximi Aug 30 '11 at 12:41
  • 1
    Maybe the guys over at http://math.stackexchange.com/ might be able to help you? – polarblau Aug 30 '11 at 13:44
  • The final math formular I ended up using was: (sinh((x - 0.5) * 5) + sinh(-(x - 0.5)) + (sinh(2.5) + sin(-2.5))) / (sinh(2.5) * 1.82) I'll post a proper answer to my own question once I can (6 hours from now, I'm not allowed earlier because I have sub 100 rep) – ximi Aug 30 '11 at 14:04

1 Answers1

4

I figured things out with the help of my previously mentioned, brilliant colleague (it was actually him who did all the heavy lifting).

The final math formular I ended up using was: (sinh((x - 0.5) * 5) + sinh(-(x - 0.5)) + (sinh(2.5) + sin(-2.5))) / (sinh(2.5) * 1.82)

I also needed to implement sinh in javascript because it's not part of the math object, this however is fairly easy:

function sinh(aValue) {
var myTerm1 = Math.pow(Math.E, aValue);
var myTerm2 = Math.pow(Math.E, -aValue);
return (myTerm1-myTerm2)/2;
}

The easing function itself looks like this:

$.easing.speedInOut = function(x, t, b, c, d) {
    return (sinh((x - 0.5) * 5) + sinh(-(x - 0.5)) + (sinh(2.5) + Math.sin(-2.5))) /    (sinh(2.5) * 1.82);
};
ximi
  • 596
  • 5
  • 17