Chapter 8. Animating Components

In this chapter, we will cover:

• Fading in an element

• Fading out an element

• Scrolling an element

• Resizing an element

• Animating with Easing

• Moving an element along a straight path

• Moving an element along a curved path

• Changing an element's color

• Sequencing multiple animations

Introduction

In this chapter, we will look at how to bring elements on our pages to life with the use of animation. You must take a rational approach when it comes to where and when to add animation into your pages. Try to keep the use of animation only to situations where it will benefit the users' experience, and avoid bombarding them with animations that serve no purpose.

Animation can provide beneficial effects in a range of situations such as easing the transition from one element to another by fading opacity, or by changing the color of an element that requires the user's attention by gently pulsing from a light to a dark shade.

We will be using the animation capabilities built into the YUI3 library, which is included in the standard Moodle installation. The basis for all animation consists of changing the value of an element's attributes from one specific value to another, over a specified time span. For example, to fade-out an element we may change the element's opacity from 100%...

Fading in an element

In this recipe, we will produce a fade-in effect by animating a change in opacity of the element from 0% to 100%. This offers a more subtle approach to making an element visible than simply changing from invisible to visible, or from not displayed to displayed.

Here we can see the key steps in this animation by looking at a selection of frames:

How to do it...

We begin by creating a PHP page to load the Moodle programming environment, which in turn loads the YUI3 environment with which we will be working.

In the following example, we create an anim_fadein.php file with the following content:

<?php
require_once(dirname(__FILE__) . '/../config.php');
$PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
$PAGE->set_url('/cook/anim_fadein.php');
$PAGE->requires->js('/cook/anim_fadein.js', true);
echo $OUTPUT->header();
?>
<div id="anim-container" style="border:1px solid black;background-color:#0099FF;float:left;padding:30px;opacity:0;">
<h1...

Fading out an element

In this recipe, we will produce a fade-out effect by animating a change in opacity of the element from 100% to 0%. This offers a more subtle approach to making an element become invisible than simply using CSS to change the visibility or display properties to hidden or none.

We can see the key steps in this animation by looking at the following selection of frames:

How to do it...

We begin by creating a PHP page to load the Moodle programming environment, which in turn loads the YUI3 environment with which we will be working.

In this example, we create an anim_fadeout.php file with the following content:

<?php
require_once(dirname(__FILE__) . '/../config.php');
$PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
$PAGE->set_url('/cook/anim_fadeout.php');
$PAGE->requires->js('/cook/anim_fadeout.js', true);
echo $OUTPUT->header();
?>
<div id="anim-container" style="border:1px solid black;background-color:#0099FF;float:left;padding:30px;">...

Scrolling an element

In this recipe, we will look at how to animate the scrolling of content within a container element. We will scroll the content of a div tag, that is, the width and height that have been set to force the content to overflow, and also set that overflow to be hidden.

We can see the key steps in this animation by looking at the following selection of frames:

How to do it...

We begin by creating a PHP page to set up a basic Moodle programming environment, in this case, anim_scroll.php, with the following content:

<?php
require_once(dirname(__FILE__) . '/../config.php');
$PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
$PAGE->set_url('/cook/anim_scroll.php');
$PAGE->requires->js('/cook/anim_scroll.js', true);
echo $OUTPUT->header();
?>
<div id="anim-container" style="border:1px solid black;background-color:#0099FF;float:left;padding:5px;width:120px;height:200px;overflow:hidden;">
<h1>Animation: Scroll</h1>
<p>
Moodle (abbreviation...

Resizing an element

In this recipe, we will cover how to resize an element on screen by animating a change in its height and width. We will resize a container div, enlarging both the width and height.

Here we can see the key steps in this animation by looking at a selection of frames:

How to do it...

We begin by creating a PHP page to set up a basic Moodle programming environment. In this case, anim_resize.php, with the following content:

<?php
require_once(dirname(__FILE__) . '/../config.php');
$PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
$PAGE->set_url('/cook/anim_resize.php');
$PAGE->requires->js('/cook/anim_resize.js', true);
echo $OUTPUT->header();
?>
<div id="anim-container" style="border:1px solid black;background-color:#0099FF;float:left;padding:5px;">
<h1>Animation: Resize</h1>
</div>
<?php
echo $OUTPUT->footer();
?>

We also create an associated JavaScript file, anim_resize.js, where we will add the animation code...

Animating with easing

Animation easing is the technique of adding acceleration or deceleration at different points during the animation to provide smoother transitions. It may also cause the transformation to exceed the destined value before returning to its final state. For example, when animating a change in height of an element, a bouncing effect could be achieved by causing the animation to overshoot the final value, then undershoot, then settle at the final value.

Fortunately, YUI3 includes many built-in easing types that we can add to our animations with very little extra code. In this example, we will use the bounce-out easing behavior in conjunction with a resize animation. This will make the bounds of the box appear to bounce as they reach the end of the animation.

A complete list of the many easing behaviors that are available in YUI3 is available at the following URL:

http://developer.yahoo.com/yui/3/api/Easing.html

Here, we can see the key steps in this animation by looking...

Moving an element along a straight path

An element can be repositioned by moving it along a straight path by animating a change in its X and Y position on the page. In this recipe, we will animate the moving of a container div element 200 pixels to the right.

Here, we can see the key steps in this animation by looking at a selection of frames:

How to do it...

We begin by creating a PHP page to set up a basic Moodle programming environment. In this case, anim_straight.php, with the following content:

<?php
require_once(dirname(__FILE__) . '/../config.php');
$PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
$PAGE->set_url('/cook/anim_straight.php');
$PAGE->requires->js('/cook/anim_straight.js', true);
echo $OUTPUT->header();
?>
<div id="anim-container" style="border:1px solid black;background-color:#0099FF;padding:30px;width:150px;">
<h1>Animation: Move</h1>
</div>
<?php
echo $OUTPUT->footer();
?>

We also create an associated JavaScript...

Moving an element along a curved path

Another way to animate motion of an element from one position to another is to use a curve motion animation. The curve is specified as a matrix of X and Y coordinates which the element's motion will follow.

In this recipe, we will move a div across a simple curve, with two sets of X and Y coordinates in the matrix list.

Here, we can see the key steps in this animation by looking at a selection of frames:

How to do it...

We begin by creating a PHP page to set up a basic Moodle programming environment. In this case, anim_curved.php, with the following content:

<?php
require_once(dirname(__FILE__) . '/../config.php');
$PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
$PAGE->set_url('/cook/anim_curved.php');
$PAGE->requires->js('/cook/anim_curved.js', true);
echo $OUTPUT->header();
?>
<div id="anim-container" style="border:1px solid black;background-color:#0099FF;padding:10px;width:150px;margin:30px;">
<h1>Animation...

Changing an element's color

In this recipe, we will animate an element changing color. We will change the background color of the div element from blue to green.

Here, we can see the key steps in this animation by looking at a selection of frames:

How to do it...

We begin by creating a PHP page to set up a basic Moodle programming environment. In this case, anim_color.php, with the following content:

<?php
require_once(dirname(__FILE__) . '/../config.php');
$PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
$PAGE->set_url('/cook/anim_color.php');
$PAGE->requires->js('/cook/anim_color.js', true);
echo $OUTPUT->header();
?>
<div id="anim-container" style="border:1px solid black;background-color:#0099FF;float:left;padding:5px;">
<h1>Animation: Color</h1>
</div>
<?php
echo $OUTPUT->footer();
?>

We also create an associated JavaScript file, anim_color.js, where we will add the animation code, with the following content:

YUI().use("node...

Sequencing multiple animations

We can change as many attributes as we want during one animation, but to get multiple animations to occur linearly (one after the other) we must use a new approach. YUI allows for this by providing an end event which is fired when an animation is complete. In this way, we may chain as many animations as we wish, one after the other.

In this recipe, we will chain two animations, reducing the size of a div element, and then fading it out.

Here, we can see the key steps in this animation by looking at a selection of frames:

How to do it...

We begin by creating a PHP page to set up a basic Moodle programming environment. In this case, anim_multiple.php, with the following content:

<?php
require_once(dirname(__FILE__) . '/../config.php');
$PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
$PAGE->set_url('/cook/anim_multiple');
$PAGE->requires->js('/cook/anim_multiple.js', true);
echo $OUTPUT->header();
?>
<div id="anim-container" style...