Taking it easy with easing control

If you're familiar with animation using various video editing tools or Adobe Flash, you've probably heard of easing. Easing is the control of acceleration and deceleration in an animation. It's most common use is to give animations a more natural feel, mimicking various properties of physics found in the real world, instead of calculated and rigid movement.

Almost as complicated as animating hex color values, easing applies virtual physics properties to the object being animated using various algorithms to control the speed of an animation as it starts off and ends. Serious math indeed. jQuery comes with a type of built-in easing, so we're saved from having to really think about any of it.

jQuery's default easing option is called "swing". Technically, there are two options—"linear" and "swing". Linear easing simply animates the object along its values from point A to point B, like a good programming script should. No acceleration or deceleration, so yeah, it is a tad "stiff".

Swing easing starts off more slowly, gains full speed, and then slows down again as the animation completes. jQuery chose swing as the default easing option as it looks best in most situations. That's probably because this is how most objects react in our real physical world; heading off a little slower while gaining speed, then decelerating and slowing down as they come to rest (provided the object didn't crash into anything while at the maximum speed).

As swing easing is the default, let's take a look at our previous script that animates in our post's paragraph blue background color and see if we can detect the difference:

jQuery('.post p').animate({,backgroundColor,:,#99ccff' }, 2000, 'linear');

It's subtle, but a definite difference is there. Linear easing is much more rigid. Advanced easing: There's a plugin for that!

As you've probably guessed, plenty of "mathy" people have figured out all sorts of variations in the easing algorithm to mimic all sorts of different physics environments and yes, there's a jQuery plugin for that. While this plugin doesn't come bundled with WordPress, that shouldn't stop you from downloading and experimenting with it. You can download and test out all the available easing options here: http://gsgd.co.uk/sandbox/jquery/easing/.

The plugin, like the Color plugin, extends the .animate() function and provides you with over 25 easing options, which include some pretty cool options such as jswing bounce and elastic, as well as a host of vector easing paths such as circular and sine wave.

The majority of these options are a bit of overkill for most projects that I've been on but I do love the elastic and bounce easing options. By the way, if you're one of those "mathy" people I referred to a second ago, you'll enjoy checking out the magic behind the easing algorithms here:


Blogging For Business

Blogging For Business

Download this Guide And Discover How Start And Run Your Very Own Successful Business Blog. Always Wanted To Start Your Own Blog?

Get My Free Ebook

Post a comment