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:

To be frank, turning a div into an elastic element during the execution of a parallel animation is a process that doesn't differ too much from performing the same task when animating only a single property of it. However, for the sake of completeness, in the next few lines I included a final code sample that shows how to accomplish this when modifying the "top" and "left" properties at the same time of the div in question. Check it out:

<!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 and height of the targeted div element using elastic bouncing

$(document).ready(function(){

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

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

Definitely, it takes longer to code an example like this than to grasp its underlying logic, right? Even so, it illustrates that GX is capable of adding the elastic effect to nearly all types of animations, including parallel ones. What's more, considering that the "gx()" method is so flexible, I recommend that you create your own elastic animations by altering different properties of an HTML element, other than its "top" and "left" coordinates, and seeing what you get in each case. The experience will be educational, trust me.

Final thoughts

That's all for now. In this seventh installment of the series, I went through the development of a couple of examples that showed how to create elastic animations by tweaking the "easing" argument taken by the familiar "gx()" method of the GX library. In truth, 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.

So far, you've learned how to use GX for creating animations that can't be canceled halfway, queued or even resumed. While this may sound annoying and impractical, the good news is that the library also will let you accomplish this very easily. To prove that, in the next tutorial I'll be discussing in depth how to use these handy features.

Here's my final suggestion: don't miss the forthcoming article!

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.