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:

As I expressed in the segment that you just read, I’d like to end this tutorial by showing you how to perform a bouncing animation when modifying the height of a div. The question that comes up here is: how can this be done in a few easy steps? Well, simply tweaking the previous example a little bit will do the trick.

Analyze the following code sample and see for yourself how easy it is to perform this task with GX:

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

$(document).ready(function(){

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

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

As this last code fragment shows, creating a bouncing effect when animating the height property of a sample div is indeed a straightforward process that can be tackled with only minor effort. Naturally, there’s plenty of room here to experiment and have fun with the “easing” argument of the “gx()” method, so I encourage you to create your own functional examples and assign different values to this parameter to see what results you get in each case.

Final Thoughts

Hopefully, this third chapter of the series has been a pretty educational experience, as you learned how to use the “easing” argument provided by the GX library to add a appealing bouncing effect to a classic animation. In all the examples developed before, the effect in question was implemented when animating only a single property of a sample div, but it’s also feasible to achieve similar results when performing parallel animations as well. Therefore, in the upcoming tutorial I’ll be explaining how to create a bouncing animation when modifying multiple properties of an HTML element.

Here’s my final suggestion: don’t miss that episode!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.