Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery easing functions with one parameter

Tags:

jquery

easing

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
}
like image 611
dahannes Avatar asked Feb 20 '26 11:02

dahannes


1 Answers

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);
like image 152
Prinzhorn Avatar answered Feb 22 '26 01:02

Prinzhorn



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!