Manipulating Background Colors with the GX JavaScript Animation Framework

If you’re ever used jQuery to add dynamic behavior to elements on your web pages, then you may already have tried out its animation capabilities. These work remarkably well in 90% percent of use cases. However, what happens if you need to implement even more sophisticated effects without leaving the comfortable API of the popular library?

Enter GX, a full-featured JavaScript framework developed by Riccardo Degni () that will let you perform all sorts of animations with your HTML elements, using only a small set of highly-configurable methods. What’s more, since GX uses the functionality of jQuery behind the scenes to leverage its full potential, you’ll find that working with it is very similar to using jQuery’s native methods.

Logically, if you’ve already read the previous article in this series, then you have a clearer idea of how to perform basic animations using the GX library. In that tutorial I developed some examples that showed how to dynamically modify the width and height of a simple div by using the library’s “gx()” method.

I also showed how to animate the targeted div by altering its dimensions simultaneously, which speaks for itself about the capabilities offered by GX for performing parallel animations.

However, this is only a simple demonstration of what can be accomplished with GX, since it comes packaged with tons of helpful features. So, in this second episode of the series I’ll be developing a few additional examples that will show how to use the library for changing the background color of a div, along with its width and height properties.

Does this sound like an interesting topic? Then begin reading now!