If you're looking for something better than Flash for building animations for your web site, keep reading. In this first part of a series, I demonstrate how to perform basic animation on a single HTML element using the GX JavaScript library. This framework offers an easy learning curve, which permits developers to create nice visual effects on web pages via a friendly API. If you've worked with jQuery to add behavior to your websites, then using GX will be even simpler.
When it comes to performing sophisticated, eye-catching animations on web pages, the first name that comes to my mind is Flash. This powerful desktop application from Adobe comprises the famous Creative Suite of the company, which includes other popular design programs like Dreamweaver and Photoshop.
Flash has evolved from a rather basic time-lined animation software in the mid-90s to the full-blown application that we see nowadays, capable of streaming videos and interacting with server-side applications. However, it still suffers from some serious issues, mostly related to the search engine optimization field.
Besides, Flash has a steep learning curve that many are reluctant to climb, and for many web projects that only need to apply basic animation effects on a small number of HTML elements, it can be overkill. Does this mean that all is lost when all you need to implement on your website are simple animations to give your visitors a bit more excitement? Fortunately, the answer is a resounding no!
As you know, there are numerous JavaScript libraries, such as jQuery, Prototype, MooTools and so forth that already come with handy animation modules. These permit you to create appealing effects by writing just a few lines of unobtrusive code.
However, if you need to implement even more complex animations without entering into the terrain dominated by Flash, there are some emerging JavaScript frameworks that will handle the work remarkably well. Among these libraries, there is one in particular that I have found easy to learn and use. In this case, I’m talking about “GX,” a full-featured JavaScript framework developed by Riccardo Degni that will let you do all sorts of clever things with your HTML elements. These range from dynamically altering their dimensions, background colors and coordinates, to applying cool fade-in/fade-outs effects, via an intuitive API.
GX relies on jQuery to leverage its full potential, so if you’re familiar with the basics of this JavaScript library, you’ll find creating animations with GX a breeze. However, the best way to see the actual functionality of GX is by means of some working examples. In this articles series I’ll be exploring the library’s most important features, so you can start exploiting its functionality in a very short time.
Ready to start learning how to work with the GX animation framework? Then let’s get going!
JavaScript 
HTML5 Boilerplate: Working with jQuery and Modernizr
