Making Bouncing Effects in Parallel with the GX JavaScript Animation Framework

When choosing a JavaScript library that allows you to animate HTML elements in a painless and unobtrusive way, making a good decision can be a challenging task due to the numerous options available. From the venerable jQuery which conquered literally legions of web designers with its easy learning curve and its already classic chainable interface, to the popular Dojo and Prototype, only to cite a few examples, the market is full of packages that will do the job remarkably well.

However, if you already fell in love with jQuery (and who hasn't?), and want to use a library that expands its nice animation capabilities, then you should take a look at GX, a framework developed by Riccardo Degni that will let you create a great variety of animation effects on your web pages, without having to alter a single portion of your carefully-crafted structural markup.

What’s more, if you've read all the articles previous to this one, then you probably have a more solid background than you did before in performing simple and parallel animations using the GX framework. During those tutorials I developed some basic examples that demonstrated how to use the library’s “gx()” method to modify the width, height and background color of a div, all at the same time.

I left off the last part discussing how to add a nice bouncing effect to an animation by tweaking its “easing” argument, which was a fairly straightforward process. However, in that particular case the effect was only applied when animating individual properties of the target HTML element. Does this mean that this can’t be achieved when performing parallel animations? Well, fortunately GX permits you to do this very easily. In this article I’ll be developing a bunch of code samples that will show you how to accomplish this seemingly complex task in a few simple steps.

Now, it’s time to continue exploring the features offered by the GX animation library. Let’s go!