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