Producing Elastic Effects with the GX JavaScript Animation Framework

If you're a web designer searching for a full-featured JavaScript library that will let you implement a great diversity of engaging animations on your web pages without having to compromise your pristine markup, then you should take a closer look at GX. This powerful animation framework can easily be stacked on top of jQuery to create all sorts of appealing visual effects on HTML elements.

Hidden behind a friendly API, the GX library packages a surprising amount of handy characteristics that permit you to animate multiple properties of a target element, in most cases via its core "gx()" method. However, to simplify the execution of certain common effects, such as fade-in/out transitions, slides and movements, GX also comes with a set of additional methods that will do the hard work for you.

For obvious reasons, attempting to cover all of the rich features offered by the library is nearly an impossible mission. Therefore, in this article series I decided to cover only the most relevant ones, so you can start using them in many productive ways without the need to spend long hours reading the official documentation.

I left off in the previous part discussing how to take advantage of the functionality provided by the aforementioned "gx()" method to move a div diagonally on the browser. This was accomplished by altering the div's "top" and "left" coordinates at the same time. However, GX is capable of doing many more useful things, such as performing pretty realistic "elastic" animations. In this seventh chapter of the series, I'll be exploring this handy feature by presenting a decent number of functional code samples.

Ready to learn how to make your HTML elements behave like elastic structures on your web pages? Then don't hesitate anymore; start reading right now!