JAVASCRIPT

Producing Elastic Effects with the GX JavaScript Animation Framework

In this seventh part of a series, I develop a couple of examples that show how to create elastic animations by tweaking the “easing” argument taken by the familiar “gx()” method of the GX library. The use of this parameter was covered in earlier chapters when I explained the implementation of bouncing animations, so I think that understanding how to put it to work for you should be a pretty painless experience.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

February 05, 2010

TABLE OF CONTENTS:

Animating the "top" and "left" coordinates of a simple div simultaneously is a straightforward process, thanks to the flexibility offered by the "gx()" method. Just in case you haven't read the previous part of the series, where I covered this topic in depth, I'm going to use this section to provide a quick recap.

Below I listed the pair of examples developed in the preceding article. The first one moves the target div diagonally on the browser, and the latter does the same thing and also changes the element's background color. Here they are:

<!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 top and left coordinates of the targeted div element

$(document).ready(function(){

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

$('#container').gx({'top': 450, 'left': 600}, 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 {

padding: 30px;

}

#content {

padding: 30px;

position: relative;

}

#footer {

padding: 90px 30px;

}

#container {

width: 300px;

padding: 10px;

background: #ffffc0;

border: 1px solid #000;

position: absolute;

top: 120px;

left: 30px;

}

</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>Changing the top and left coordinates of the targeted div element</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 above example is extremely easy to follow, as all that it does is to move the target div diagonally on screen from top to bottom. Of course, the example in question would be incomplete if I don't show you a figure that represents the initial and final states of the previous animation, so below I included one that depicts this process pretty clearly:

There you have it. Now that you've learned (or recalled) how to use the GX library for animating the "top" and "left" properties of a simple div at the same time, here's a final example that not only performs the same task, but changes the div's background color:

<!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 top/left coordinates and background color of the targeted div element

$(document).ready(function(){

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

$('#container').gx({'top': 450, 'left': 600, 'background-color': '#ff8040'}, 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 {

padding: 30px;

}

#content {

padding: 30px;

position: relative;

}

#footer {

padding: 90px 30px;

}

#container {

width: 300px;

padding: 10px;

background: #ffffc0;

border: 1px solid #000;

position: absolute;

top: 120px;

left: 30px;

}

</style>

</head>

<body>

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

<h2>Header section</h2>

</div>

<h2>Changing the top/left coordinates and background color of the targeted div element</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>

Well, I have to admit that moving a div diagonally on screen while its background color changes dynamically isn't exactly the most useful thing that can be done on a web page, but as the previous example shows, the "gx()" method permits you to do this easily. Besides, the image below represents schematically the stages of this specific animation. Take a look at it, please:

So far, so good. Having already demonstrated how simple it is to change the "top" and "left" properties of a div simultaneously with the "gx()" method, it's time to explore a few other useful features that come with the GX library. Therefore, in the following section I'll explain how to create a classic animation that also will incorporate an appealing elastic effect.

Want to learn the fine details of this interesting process? Then click on the link below and read the lines to come.

Next: Creating elastic animations with GX >>