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