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);
Prinzhorn's answer is correct - I just wanted to point to the fact that you can easily create your own functions with this generator and convert them using the above shown math to use it with Skrollr.
Example
function(t, b, c, d) {
var ts=(t/=d)*t;
var tc=ts*t;
return b+c*(1*tc*ts + -2.5*ts*ts + -1*tc + 4*ts + -0.5*t);
}
can be used like this
<div data-0="opacity[easeCustomAwesomeSuper]:0"></div>
<script>
$(function() { var s = skrollr.init({
easing: {
easeCustomAwesomeSuper: function(p) {
return p*p*p*p*p + -2.5*(p*p*p*p) + -1*(p*p*p) + 4*(p*p) + -0.5*p;
}
}
});});
</script>
I've created this gist to show the details.
