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:

To see for yourself how easy it is to use GX, first make sure you’ve downloaded all of its dependencies from here along with the jQuery library. Done? Okay then, take a look at the following example. It expands the initial width of a sample div to a value of 600px with a single call to the aforementioned “gx()” method:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Using the GX Animation Library</title>

// change the width of the targeted div element

$(document).ready(function(){

$('#container').click(function(){

$('#container').gx({'width': 600}, 500, 'Linear');

});

</script>

body {

padding: 0;

margin: 0;

background: #fff;

font: 1em Arial, Helvetica, sans-serif;

color: #000;

}

#wrapper {

width: 960px;

margin: 0 auto;

}

#header, #content, #footer {

padding: 30px;

}

#container {

width: 300px;

padding: 10px;

background: #ffffc0;

border: 1px solid #000;

}

</style>

</head>

<body>

<h1>Using the GX Animation Library</h1>

<h2>Header section</h2>

<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 its width</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>

In this example, the div being animated is identified simply as “container” and has been assigned an initial width of 300px. While this process is not especially interesting, the fun part comes when the “gx()” method is called after the web page finishes loading. At that point, the div’s starting width is expanded to 600px, with a duration of 500 milliseconds. In addition, the “gx()” method takes an optional “easing” argument, which allows you to change the way that the animation is carried out.

In this particular case, a “Linear” value for the easing argument has been specified, but it’s possible to use a few other options, which we'll explore in more detail in subsequent tutorials of this series.

Well, now that you've learned how to perform a simple animation using the GX library, look at the screen capture below. It shows the initial and final states of this process:

That looks pretty good, doesn’t it? Considering that the whole animation required just a single line of code, the result is more than acceptable. But, at this stage I’m only scratching the surface of the features that come with the GX framework. Therefore, in the next section I’ll be showing you how to use it for altering the height of the same “container” div that you saw in the previous example.

To learn how this will be done, click on the link below and read the lines to come.

Next: Performing basic animation with GX >>