jQuery easing functions with one parameter

Question

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
}

Why would you need something like that? Looks like a XY problem http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem — A. Wolff, Mar 20 '14 at 11:23
I am trying to generate a custom easing-function to be used with skrollr. Therefore it should have that format. See this issue: https://github.com/Prinzhorn/skrollr/issues/341#issuecomment-34225683 — dahannes, Mar 20 '14 at 11:30
This comment still holds true https://github.com/Prinzhorn/skrollr/issues/341#issuecomment-25972719 — Prinzhorn, Mar 20 '14 at 11:55
@A.Wolff Because they are over-engineered, slow, and buggy (they generate NaN's when d == 0, don't handle the edge cases when t < 0, nor t > d), inefficient by declaring but not using the param x. — Michaelangel007, Apr 11 '16 at 21:13
@Michaelangel007 If duration is zero, then velocity is infinite, so NaN is the correct result. Similarly, if the time is not between 0 and duration, all bets are off and the easing function result cannot be trusted. An easing function could be coded to swallow a time-out-of-bounds error, but I'd say it's better not to sweep it under the rug, as it signals something is fundamentally wrong in the application's time tracking. As for the x parameter, that was added in the jQuery code and I have no idea why. — Robert Penner, Mar 15 '17 at 20:19
@RobertPenner That's incorrect. You are interpolating BETWEEN start and end. If zero time has elapsed you are STILL at the start. If time >= duration then you are at the end. — Michaelangel007, Mar 16 '17 at 20:49
@Michaelangel007 Negative time is not the same as zero time. If negative time is being fed to the easing function, something in the application needs to be fixed. — Robert Penner, Mar 17 '17 at 02:31
@Michaelangel007 Semantics aside, I know it's not hard to clamp time between 0 and duration, but I don't see this as the easing function's job. If I were writing them now instead of in 2001, I would have made t from 0 to 1 and removed b, c, d. The t/d, etc. calculations were hand-holding so I didn't make Flash designers do algebra in the age before tweening libraries. But now, time management (clamping and scaling) is better left outside of the easing function to keep it light. — Robert Penner, Mar 17 '17 at 02:48

score 4 · Accepted Answer · edited May 23 '17 at 12:25

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

score -1 · Answer 2 · answered Mar 13 '15 at 18:43

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.

jQuery easing functions with one parameter

2 Answers2