jQuery easing function — variables' comprehension

Question

How does the easing function for jQuery work? Take for example:

easeInQuad = function (x, t, b, c, d) {
    return c*(t/=d)*t + b;
};

How does that work? What does each parameter hold? How would I implement some dumb easing for an animation?

Also how would I attach an easing pattern to jQuery, is loading it into $.easing good enough?

Danie

Not an exact answer, but Robert Penner's easing website is an awesome resource. Read in particular the chapter from his book Good stuff. – Colby

Answer 1

According to the jQuery 1.6.2 source, the meaning of the easing function is as follows. The function is called at various points in time during the animation. At the instants it is called,

• x and t both say what the time is now, relative to the start of the animation. x is expressed as a floating point number in the range [0,1], where 0 is the start and 1 is the end. t is expressed in milliseconds since the start of the animation.
• d is the duration of the animation, as specified in the animate call, in milliseconds.
• b=0 and c=1.

The easing function should return a floating point number in the range [0,1], call it `r`. jQuery then computes `x=start+r*(end-start)`, where `start` and `end` are the start and end values of the property as specified in the call to animate, and it sets the property value to `x`.

As far as I can see, jQuery doesn't give you direct control over when the animation step function is called, it only lets you say "if I am called at time t, then I should be thus far through the entire animation." Therefore you cannot, for example, ask for your object to be redrawn more frequently at times when it is moving faster. Also, I don't know why other people say b is the start value and c is the change -- that's not what jQuery source code says.

If you wanted to define your own easing function to do the same as easeInQuad, for example,

$.extend(jQuery.easing,{myfunc:function(x,t,b,c,d) { return x*x; }})

$('#marker').animate({left:'800px'},'slow','myfunc');

$.extend(jQuery.easing,{myfunc:function(x,t,b,c,d) { return x*x; }})

$('#marker').animate({left:'500px'},'slow','myfunc');

#marker { position: absolute; left: 10px; top: 50px; background: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='marker'>Hello World!</div>

Circinate

@Circinate the animation step function is the jQuery.fx.interval, which you can find here api.jquery.com/jQuery.fx.interval – Tweeny

If it helps someone else understand, x is basically % the animation is complete. x = t / d (percent complete equals elapsed time divided by duration). – Appear

Answer 2

A concrete example,

Suppose our initial value is 1000 and we want to reach 400 in 3s:

var initialValue = 1000,
    destinationValue = 400,
    amountOfChange = destinationValue - initialValue, // = -600
    duration = 3,
    elapsed;

Let's go from 0s to 3s:

elapsed = 0
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 1000

elapsed = 1
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 933.3333333333334

elapsed = 2
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 733.3333333333334

elapsed = 3
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 400

So compared to the synopsis:

$.easing.easeInQuad = function (x, t, b, c, d) {...}

we can deduce:

 x       t          b              c            d
 |       |          |              |            |
null  elapsed  initialValue  amountOfChange  duration

---

NB1: One important thing is that elapsed(t) and duration(d) should be expressed in the same unit, eg: here 'seconds' for us, but could be 'ms' or whatever. This is also true for initialValue(b) and amountOfChange(c), so to sum-up:

 x       t          b              c            d
 |       |          |              |            |
null  elapsed  initialValue  amountOfChange  duration
         ^          ^              ^            ^
         +----------|----=unit=----|------------+
                    +----=unit=----+

NB2: Like @DamonJW, I don't know why x is here. It does not appear in Penner's equations and does not seem to be used in result: let always set him to null

Aarika

Thanks, this example really clarifies how easing functions work for me. – Bolognese

But I think the duration is in milliseconds and not in seconds. – Connatural

Answer 3

t: current time, b: start value, c: change from the start value to the end value, d: duration.

Here is how it works: http://james.padolsey.com/demos/jquery/easing/ (curve representing when a CSS property is changed).

Here is how I would implement some dumb easing: http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm (math is not my strong suit)

You would extend like any of these: http://code.google.com/p/vanitytools/source/browse/trunk/website/js/custom_easing.js?spec=svn29&r=29 - good enough!

Merla

And what is the x parameter? None of the examples in the custom_easing.js you linked to make use of x. – Circinate

@Damon: Well, good question. But if you look at the example asked to be explained, x isn't even used in that function. Passed in, not used. This is an extra parameter not needed for the equations, but necessary for compatibility with jQuery. – Merla

I added some details about this at the end of my answer – Aarika

Answer 4

This plugin implements the most common easing functions: http://gsgd.co.uk/sandbox/jquery/easing/

Mastodon

yes and there is the comment in the source that references it: github.com/jquery/jquery-ui/blob/1-8-stable/ui/… – Aarika

Answer 5

Looked through the 1.11 jquery code. The x parameter seems to mean 'percent', independent from initial time value. So, x is always (0 <= x <= 1) (means abstract coefficient), and t is x * d (means time elapsed).

Frayne