JAVASCRIPT

The GX JS Animation Framework

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.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

January 20, 2010

TABLE OF CONTENTS:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

<h2>Click on the div below to change both its width and height</h2>

<p>This container will be animated via the GX animation library. For more information on GX, please click <a href="http://gx.riccardodegni.net/">here</a>.</p>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

As you can see, the example doesn’t different too much from the ones that I coded in previous sections. Here, the only detail worth noting is the number of arguments that have been passed to the “gx()” method. Since the goal here was to animate the target div by modifying its width and height simultaneously, the method in question has been called with the final values that must be assigned to those properties.

If the previous explanation sounds slightly confusing to you, the following image should clear up your doubts very quickly:

As the above figure shows, the GX library not only permits you to animate multiple properties of an HTML element at the same time, but in an easy fashion! Naturally, I’m not saying that altering the width and height of divs is something that should be done on every single website that you design, but at least you can rest assured that GX will let you do this with only minor hassles.

Final thoughts

In this first part of the series, I demonstrated how to perform basic animations on a single HTML element using the GX JavaScript library. Definitely, one of the strongest benefits of this framework is its easy learning curve, which permits you to create nice visual effects on web pages via a friendly API. Besides, if you've worked with jQuery on a daily basis to add behavior to your websites, then using GX will be even simpler.

In the next tutorial, I’ll be showing how to take advantage of the functionality of the library to dynamically change the background color of the sample div used in previous examples. Don’t miss the upcoming part!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.