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”).
Would be nice to have this feature in jQuery 1.4
As this is a modded animate, could changes in the jquery core create some bugs in your implementation?
I like that syntax, James! A more verbose syntax that doesn’t require modding anything would be this:
Actually, the first animate in my previous comment could be written as .animate({left: 500}, 1000) since ’swing’ is the default easing.
@Cedric, potentially, yes, any changes to the fx core could have an effect, although I doubt they would.
@Karl, I mentioned that as an alternative but two things make it slightly different from my solution:
- The animations are not in sync, one will begin slightly after the other. This isn’t a big issue at all – but it could be noticeable in certain situations.
– My mod has the effect of applying the per-property easing function on top of the default easing function for that animation. I didn’t intend for this to happen originally, but I’m not sure how to avoid it. You can see the difference here: http://james.padolsey.com/demos/jquery/easing/mod-vs-noqueue.html
Ah. I guess I glossed over that part. I see your point.
[...] happy to write that my proposed change has been accepted into the jQuery “fx” core. I thought it worth explaining how this [...]