JAVASCRIPT

Creating Bouncing Effects with the GX JavaScript Animation Framework

In this third part of a series of articles on the GX JavaScript animation framework, you'll learn how to add bouncing effects to simple divs. You'll be surprised at how easy it is to do.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

January 22, 2010

TABLE OF CONTENTS:

Obviously, the core functionality provided by the already familiar “gx()” method rests on its ability to animate one or multiple properties of a given HTML element. Even when this is the desired result in most cases, animations can be “spiced up” a little more by passing different values to the “easing” argument taken by this method. In all of the examples developed so far, the animations have been linear. However, it’s possible to produce bouncing effects, not surprisingly by using a “bounce” easing.

To demonstrate how to accomplish this, now pay attention to the example below. When rendered by the browser, it will expand the initial width of a div, but this time with a nice “bouncing” effect:

<!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>

// use bounce easing to change the width of the targeted div element

$(document).ready(function(){

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

$('#container').gx({'width': 600}, 3000, 'Bounce');

});

</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>Using bounce easing to change the width 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>

True to form, understanding what this example is really a simple matter, right? Nevertheless, it does introduce an interesting twist. In this case the “easing” parameter passed to the “gx()” method has been assigned a “Bounce” value, which will produce a bouncing effect when the targeted div gets animated. Just for fun, go ahead and test the previous example on your own browser. You’ll see that it works like a charm.

So far, so good. Now that you saw how easy it is to create a simple bouncing animation with the GX library, it’s time to continue exploring this handy feature. With this idea in mind, in the course of the next section I’ll be creating a final example which will assign the same “Bounce” value to the easing argument of the “gx()” method, but this time when modifying the height of the same sample div.

As usual, to see how this last example will be developed, click on the link below and read the lines to come.

Next: Adding bounce and changing height >>