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:

As I expressed right at the beginning of this article, the "easing" argument accepted by the "gx()" method can be tweaked in a couple of interesting ways. The first time that you learned how to do this was when I discussed the implementation of "bouncing" animations (you remember that, right?), but it's also possible to use the same argument to produce nice elastic effects.

To demonstrate how to do this, in the lines below I listed a brand new code sample. It alters the width of a sample div, but this time the animation will be preceded by the aforementioned elastic effect. Here's how this example looks:

<!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 using elastic bouncing

$(document).ready(function(){

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

$('#container').gx({'width': 600}, 2000, 'Elastic');

});

</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>changing the width of the targeted div element using elastic bouncing</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>

Didn't I tell you a moment ago that implementing an elastic animation with GX was a no-brainer process? And to be fair, the example that you just saw above demonstrates this in a nutshell. Aside from modifying the "left" property of the same target div, it passes a value of "Elastic" to the easing argument of the "gx()" method.

Quite possibly, at this time you're wondering what this buys us. Well, if you give the previous code snippet a try on your own browser, you should see that the div expands and contracts quickly, emulating the behavior of a real elastic object.

Since it's feasible to implement this type of effect when changing multiple properties of an HTML element, in the final segment of this tutorial I'll be explaining how to create an example similar to the one shown previously, but in this case it'll implement the elastic effect when animating the "top" and "left" coordinates of the target div simultaneously.

Now go ahead and read the section to come. It's only one click away.

Next: An elastic effect with a parallel animation >>