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
}
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 percentage). 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);