dahannes - 1 year ago 87

jQuery 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`

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

}

`easeOutBack: function (x) {`

// same return

}

Answer Source

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 **p**ercentage). 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);
```