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:

If you found it easy to animate a single div by dynamically altering its width with the “gx()” method, then when I show you how to modify its height, you’ll see that that task is even simpler. Of course, the best way to understand the underlying logic of this process is by way of a functional example, so here’s one that shows how to perform the animation in a snap. Check it out:

<!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 height of the targeted div element

$(document).ready(function(){

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

$('#container').gx({'height': 300}, 1000, '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 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>

There you have it. Now, the first argument passed to the “gx()” method is the new height that must be assigned to the “container” div. It’s hard to believe, but this simple change triggers an animation whose respective initial and final states are represented by the image below:

If you’re anything like me, then presumably at this point you’ll have grasped how the GX framework does its business. Basically, performing an animation requires that you first assign one or more initial values to properties of a selected HTML element, and then execute the animation itself by specifying the desired final values. It’s that easy, really.

So far, I've demonstrated how to animate a div by altering its width and height individually. However, it’d be helpful to code an example that shows how to animate these two properties at the same time. That’s exactly what I’ll be doing in the final segment of this article. Thus, to learn more, click on the link below and read the following lines.

Next: Animating the width and height of a targeted div simultaneously >>