A Brief Introduction

Although JQuery animations are absolutely amazing, they can sometimes be a bit plain without the help of a few plugins. It is argued among JavaScript junkies as to which library or plugin results in the best looking animations, but the simplicity of the JQuery easing plugin makes it a popular choice among many. Today, we’ll look at some of the common easing functions, and make pretty good use of them as well. Let’s get started.

Part 1: What is easing?

Plain and simple, easing is the “smoothing out” of an animation. Most of the time, an animation will simply start and stop very abruptly, and can honestly look kind of ugly sometimes. Easing gives us a way to make our animations a bit smoother, and take some of the “jaggedness” out of them. Some of the easing methods are words like easeOut, easeIn, and easeInBounce. We’ll use the arbitrary words to tell JQuery how to handle the beginning and end of our animations. Now that that’s out of the way, let’s move on to the fun stuff!

1.2: Adding the easing plugin

The plugin is included with the downloadable folder that comes with this tutorial, and is called easing.js. We’ll want to add this directly after we add JQuery into our page, and we’ll want to add our main.js file directly after that. Therefore, the <head> section of our page will end up looking like this:

We’ll be writing our code, as usual, in the main.js file. 

1.3: The bouncing ball

Our first example of easing will be of the ease-out-bounce function. After we create an animation, we add easing directly after we say how long we’d like the animation to take. Our ball object, when clicked, will be animated so that it falls to the bottom of the screen. After the animation is complete, the easing type will be called, giving us the bounce effect. Here’s what the ball function should look like.

Because we have the easing plugin added in our <head> section, we have access to all of the great easing options it provides us. As you can see, easeOutBounce is our chosen option. If you view the ball in the browser and click on it, you’ll see it drop to the bottom and bounce with a level of realism that can only be provided by some type of easing. As a side note, be sure to grab the downloadable file so that you’ll have all of the CSS, otherwise you’ll have to create your own “ball” div in the HTML.

1.4:  The expanding elastic square

Our next example will be of the easeOutElastic easing method. This one is one of my favorites, and after this you should be able to add your own easing options fairly simply, so we’ll make this the last example. Again, if you want to follow along, you should grab the downloadable zip file so you can have all of the CSS and HTML required to see it in action. Here’s what the ‘expanding elastic square’ function looks like:

As you can see, we’ve used the easeOutElastic effect to give our square the ‘rubbery’ effect that you see if you click the square while the page is loaded in the browser.

A Few Last Words

Again, easing your animations is a great way to give them that extra boost where default animations can be a bit lackluster. There are far more easing methods available, and a quick Google search for JQuery Easing will give you a comprehensive look at all of them. In our next tutorial, we’ll make a sortable list of items using JQuery and some fancy CSS. See you then!

Download Source Files