Producing Elastic Effects with the GX JavaScript Animation Framework
(Page 1 of 4 )
In this seventh part of a series, I develop a couple of examples that show how to create elastic animations by tweaking the “easing” argument taken by the familiar “gx()” method of the GX library. The use of this parameter was covered in earlier chapters when I explained the implementation of bouncing animations, so I think that understanding how to put it to work for you should be a pretty painless experience.
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!
Next: Review: animating simultaneously the top and left properties of a div >>
More JavaScript Articles
More By Alejandro Gervasio
