dahannes dahannes - 3 months ago 22
jQuery Question

jQuery easing functions with one parameter

Is there a way to convert jQuery-compatible easing functions so that they only need a single parameter? (e.g. to use them with something like skrollr).

For example

easeOutBack
takes six parameters.

The original function:

easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}


What I want:

easeOutBack: function (x) {
// same return
}

Answer

There you go:

easeOutBack: function (p, s) {
    s = 1.70158;
    p = p - 1;
    return (p * p * ((s + 1) * p + s) + 1);
}

I will document the process here once and for all. First read this to understand what the variables mean jQuery easing function — variables' comprehension.

Now it's pretty easy.

Since c is 1 and b is 0, we can just remove them (there's a multiplication with c and b is added, which are both noops).

if (s == undefined) s = 1.70158;
return ((t=t/d-1)*t*((s+1)*t + s) + 1);

Now we just set s to the magic number 1.70158, because I have no idea if something else will ever be passed to the easing function by jQuery (skrollr won't for sure).

s = 1.70158;
return ((t=t/d-1)*t*((s+1)*t + s) + 1);

Now jQuery is highly optimized, let's move this weird assignment inside the expression to the line before

s = 1.70158;
t = t/d - 1;
return (t*t*((s+1)*t + s) + 1);

Almost there! If you read about t and d you will notice that t/d is the percentage of how much the animation has progressed so far. Guess what, that's what skrollr calls p (see, for *p*ercentage). Let's just replace t/d with p

s = 1.70158;
t = p - 1;
return (t*t*((s+1)*t + s) + 1);

And the last step is to rename t to p, because we don't need a third variable.

s = 1.70158;
p = p - 1;
return (p*p*((s+1)*p + s) + 1);
Comments