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