Scaling and Moving Web Page Elements with the GX JavaScript Animation Framework

So, if you’re a web designer in search of a full-blown JavaScript library that will let you create appealing animations on your web pages without leaving the friendly API that made jQuery so popular over the last few years, then look no further because you’ve come to the right place.

Naturally, if you’ve reached this stage of the series, it’s quite probable that you’re already familiar with using the GX library to implement a number of clever effects on your (X)HTML documents. These effects include dynamically altering multiple properties of a target element, and even more complex tasks, such as pausing and queuing animations via the library’s “gx()” method.

However, it’s valid to mention that GX comes with a set of additional methods, which simplify considerably the implementation of a certain number of common animations on web pages, such as fade-in/outs, slides and so forth, which avoids the use of the “gx()” method in every possible situation.

In the last tutorial I left off explaining how to utilize some of these convenient methods for changing the opacity of a div, as well as sliding the element and toggling its visibility, all via a single line of code. We haven't finished covering the methods in question, though, as GX provides a few more that can be used for scaling an element up and down, and even moving it across the browser.

Therefore, this final chapter of the series will be focused on explaining how to achieve these simple effects, thus finishing this humble roundup of the GX animation framework. Now, don’t hesitate anymore; start reading right away!