Animating motion using the YUI is done in a few simple steps. Let's pretend we are moving a dot across the page.

1. Think where you want the dot to go. Declare a variable and make an object (an object is indicated by the curly braces). In this example, the variable is called “attributes”. The important part is to declare the points in the attributes. Points defines where you want the dot to go to. Where do you think this dot is going to go on the page?

var attributes = {
   points: { to: [600, 10] }
};

That's right. The two numbers indicate the x and y coordinates on the web page. The YUI function to animate needs to know the points where the dot is going to move to. Notice the syntax. Points is an object and to is an array of two numbers: the x and y position.

2. Make a new YAHOO.util.Motion object. Here we are making a new variable called “anim.” This will be the YUI Motion object. The most important part is to define in the arguments of the Motion function two things: a) Which object is going to be moving (supply a reference or an id), and b) the name of the variable holding the points to which the object of the motion (we called it attributes, remember).

var anim = new YAHOO.util.Motion('blueball', attributes);

3. Say that you want the animation to begin by telling "anim" to animate(). Like all Javascript functions, even those without arguments, you need the parentheses.

anim.animate();

On the next page, you will have a chance to experiment with different x and y coordinates. However, pay attention to the rest of the code as well since you will be quizzed on it after your time to play.