JAVASCRIPT

Cancel, Queue and Pause Animations with the GX JavaScript Animation Framework

In this eighth part of a series, I discuss how to cancel, pause and resume animations with the GX JavaScript library. You'll see that performing these tasks, as with many of the tricks you can make the GX library do, is a straightforward process.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

February 08, 2010

TABLE OF CONTENTS:

One of the most useful features provided by the GX library is its ability to queue animations, or in other words, create stacks of effects that can be triggered in a predefined linear sequence. This process resembles the notion of time-lined animations, where it's possible to specify the starting time, duration and the type effect that will be applied to a given HTML element.

With GX, this sequential process will be controlled programmatically and is very easy to implement via the familiar "gx()" method. You're probably wondering how a stack of effects can be assigned to an HTML element, right? Well, to answer your question, below I coded a basic example that creates a chain of three different animations and assigns them to a simple div. Here it is:

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

// queuing different animations

$(document).ready(function(){

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

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

.gx({'height': 300}, 1000, 'Linear')

.gx({'background-color': '#ff8000'}, 3000, 'Linear')

});

</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>Queuing different animations</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 seen above, the stack of effects was implemented by calling three times in sequence the corresponding "gx()" method with different arguments. It was as simple as that! In addition, this chain of effects is represented by the following image, which shows how the target div is animated at distinct points of an imaginary time line:

Of course, the example that you just saw opens up the doors for implementing all sorts of queued animations, as the whole process is reduced to calling the "gx()" method in the desired sequence with the proper arguments, and nothing else. The possibilities are endless.

At this point, I will assume that creating stacks of effects with GX is now familiar to you, so it's time to explore other useful features offered by the library. Therefore, in the upcoming segment I'll be explaining how to cancel an animation once it's been triggered by a given event.

To learn how this will be accomplished, click on the link below and read the lines to come.

Next: Canceling animations with the gxInit() method >>