Getting fancy with easing

A while ago I posted a funky demo that made use of the canvas tag to show the effects of all the available jQuery easing functions. jQuery allows you to specify an easing function whenever you initiate an animation. jQuery will use your selected easing function to govern the progression of that animation.

Currently, it’s not possible (within the confines of the current API) to have separate easing functions running on separate properties within a single animation. Obviously, you can run two animations at the same time (with different easing functions) by disabling queueing, but they’re not really in sync – one is slighly ahead of the other.

So, this is a regular animation, with one easing function:

$(myElement).animate({
    left: 500,
    top: 500
}, 'easeOutExpo');

It’s a pretty average animation, the easing function effects both properties (top and left) so the element moves in a straight line, with a slight slow-down at the end.

I’ve had a go at modding the animate() method so it’s possible to specify an additional easing function for each individual property, like so:

// prop: [duration, easing]
 
$(myElement).animate({
    left: 500,
    top: [500, 'easeOutBounce'] 
}, 'swing');

In this example, the overall progression of the animation is governed by the swing easing function*. But, in addition to that, the top property is being governed by the easeOutBounce function.

* – It’s set to swing by default anyway; I’m being explicit for the sake of the example.

Have a look at the resulting effect! It’s pretty cool!

As I said before, a similar effect can be achieved with two animations and the queue option being set to false, but the modded animate() method actually allows more than that; it allows you specify a “base” easing function which will handle the overall progression of the animation, and an additional easing function to govern the progression of a single property. It’s like overlaying easing functions; the result of one is the input of another.

You can grab the animate() mod (view | source) and have a go for yourself!

Note that you must download the easing functions in order to use them in your animations – they’re not included in the jQuery core (other than the default “swing”, and “linear”).