jQuery Easing Plug-in: Building a Navigation Bar using the easeOutElastic Effect

If you’re in search of a JavaScript package that lets you create eye-catching animations on your web pages without having to leave the comfortable and friendly environment that has made jQuery so popular in the last few years, then you should check out Easing, a handy plug-in that will permit you to achieve this by using something as simple as the library’s “animate()” method.

As its name suggests, the plug-in extends the set of easing effects included by default with jQuery, and bases most of its functionality on the easing equations created by Robert Penner. Of course, the seamless integration of Easing with jQuery allows you to animate any web page element with a single method call, which makes it suitable for use in multiple scenarios and situations.

However, one of the most common use cases where Easing really shines is in the construction of a hierarchical navigation bar. It can be utilized to subtly animate the pertinent subsections without ending up with a user interface that resembles the ones built with Flash in the 90s.

What’s more, to demonstrate how simple it is to create a bar like this with the Easing plug-in, in previous parts of this series I defined the bar’s structural markup, visual presentation and behavior layer, and finally used the functionality of Progressive Enhancement to make the bar entirely functional even if JavaScript is disabled on the browser.

So far, this sample navigation bar utilizes the plug-in’s “easeOutBounce” easing to animate its subsections, but it’s possible to switch easily over a few other effects, which are very engaging as well. Therefore, in this fourth installment of the series I’m going to create a subtle variation of the previous links bar, which this time will use a brand new effect, called “easeOutElastic.”

Ready to learn the full details of this redesign process? Then jump forward and read the lines to come!