a more pleasing easing

The other day I mentioned my admiration for making the jQuery animation default "swing". Today I'll talk about some of the other options provided by the jQuery Easing plugin.

Used judiciously, animations can make transitions to the state of the page less abrupt. Fiddling with easings gives you more options to add a "physicality" to the objects in question. Together, animation and easings can add a pleasant physicality (or bit of "juiciness" as I've got people saying at work.) to otherwise boring pages. (There's a reason why these kinds of animations and a sense of physicality is deeply baked into iOS...)

Actually, that page itself does a good job of showing usage... but I'm not crazy about the widget they give you to try out the various easings provided-- on that page, "The Clicker" always shows you 2 animations back to back (one for increasing the boxes size and one for putting it back) and so it's difficult to get a feel for each selection in isolation. Also, I think moving objects is a more common form of animation, and in general I prefer not to have to fiddle with select boxes. So I present: The Mover/Grower(tm). Like "The Clicker" it builds the list of easings by querying the module itself... you can set the speed, decide which (or both) of the things you want to animate, and then click to see any easing. (Click in rapid succession to combine.)

Mover:

Grower:

Speed: ms
Demonstrate: move grow both
jQuery Builtins: linear swing
From easing extension:

In terms of which of these to use, if you're in a hurry...our first use case for this was an object flying from off the screen-- "easeOutBounce" had the nicest feel to the landing.  Some of the "In" animations feel a little corny when they start, like a Hannah-Barbara cartoon character getting its feet under it before starting to run, but "easeInOutElastic" is subdued and pleasant.

Some other caveats are that animations can feel choppy if there are too many at once, or if the page is still kind of loading, or if there's a json-ish query or what have you, so want to be careful and minimize other things going on on the page when the thing loads (for example, a second delay before a message notifiation flies in, or launching a JSON request on animation completion, rather than at the same time as the animation started.)