Search code examples
jqueryeasing

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
}

Solution

  • 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);