Advertisements
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!
As I stated in the introduction, one of the best things about the GX library is its flat learning curve. Creating a basic animation with it is only a matter of invoking its main method, not surprisingly named "gx()," with the proper parameters.
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using the GX Animation Library</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="gx.js"></script>
<script type="text/javascript" src="gx.transitions.js"></script>
<script type="text/javascript">
// change the width of the targeted div element
$(document).ready(function(){
$('#container').click(function(){
$('#container').gx({'width': 600}, 500, 'Linear');
});
});
</script>
<style type="text/css">
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>
<div id="wrapper">
<div id="header">
<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>
<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>
<div id="content">
<h2>Click on the div below to change its width</h2>
<div id="container">
<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>
</div>
<div id="footer">
<h2>Footer 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>
<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>
</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.
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using the GX Animation Library</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="gx.js"></script>
<script type="text/javascript" src="gx.transitions.js"></script>
<script type="text/javascript">
// change the height of the targeted div element
$(document).ready(function(){
$('#container').click(function(){
$('#container').gx({'height': 300}, 1000, 'Linear');
});
});
</script>
<style type="text/css">
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>
<div id="wrapper">
<div id="header">
<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>
<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>
<div id="content">
<h2>Click on the div below to change its height</h2>
<div id="container">
<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>
</div>
<div id="footer">
<h2>Footer 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>
<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>
</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.
In the previous sections, you saw how easy it is to use the GX library for animating a div by individually altering its width and height properties. Of course, the library is capable of doing many more useful things, such as animating multiple properties at the same time.
As usual, the best way to learn how to accomplish this is by example. So, below I coded one for you that performs this more sophisticated animation in a few simple steps. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using the GX Animation Library</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="gx.js"></script>
<script type="text/javascript" src="gx.transitions.js"></script>
<script type="text/javascript">
// change the width and height of the targeted div element
$(document).ready(function(){
$('#container').click(function(){
$('#container').gx({'width': 600, 'height': 300}, 1000, 'Linear');
});
});
</script>
<style type="text/css">
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>
<div id="wrapper">
<div id="header">
<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>
<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>
<div id="content">
<h2>Click on the div below to change both its width and height</h2>
<div id="container">
<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>
</div>
<div id="footer">
<h2>Footer 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>
<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>
</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!
