JAVASCRIPT

Making Bouncing Effects in Parallel with the GX JavaScript Animation Framework

In this fourth installment of a series, I provide you with some friendly examples that show how to use the GX library for creating an appealing bouncing effect when performing parallel animations on a target div. The process is extremely simple, so you shouldn’t have major trouble if you need to implement this kind of effect on your own web pages.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

January 26, 2010

TABLE OF CONTENTS:

Just in case you haven’t read the previous article, where I discussed how to use the GX library to add a bouncing effect when animating a simple div, in the lines to come I reintroduced a couple of the examples I developed then. The first of these makes the target div bounce when its width is modified, and the corresponding source code looks like this:

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

That was easy to code and read, wasn’t it? As seen above, implementing a bouncing effect when performing a simple animation is only a matter of passing a value of “Bounce” to the “gx()” method and nothing else. In this particular case, the property being changed was the div’s width, but as you may guess, it’s feasible to achieve a similar result when modifying a different property. That’s exactly what the following example does. Take a look at it, please:

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

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

Definitely, the code of the previous example speaks for itself, so I’m not going to waste your valuable time explaining its inner workings. However, it’s valid to point out an interesting thing about the way that it implements the bouncing effect. As you can see, it performs the animation on just a single property of the target div, which is nice, but it would be desirable to produce a similar result when animating multiple properties as well.

Well, as I anticipated in the introduction, the GX library permits us to do this in a truly simple fashion. So, in the course of the following section I’ll be showing you how to make a div bounce when altering simultaneously its width and height.

To learn the complete details of this process, read the segment to come. It’s only one click away.

Next: More effects: using a Bounce easing for parallel animations >>