Curve animation

Animate along a curve

The YUI library includes an example of animating along a curve.
<link rel="stylesheet" type="text/css" href="fonts-min.css" />
<script type="text/javascript" src="yahoo-dom-event.js"></script>
<script type="text/javascript" src="animation-min.js"></script>

   
<style type="text/css">
#demo {
    
    margin-bottom:1em;
    height:30px;
    width:30px;
}
</style>	
...
<body class=" yui-skin-sam">
...
<button id="demo-run">run</button>

<img id="demo" src="eagle.gif" style="position:absolute; top:200px; left:200px" />
<img id="demo2" src="eagle.gif" style="position:absolute; top:100px; left:400px" />

<script type="text/javascript">
(function() {
    var attributes1 = {
        points: { to: [200, 200], control: [ [300, 600], [800, 500], [450, 650], [730,230], [50, 650] ] }
    };
	   var attributes2 = {
        points: { to: [400, 100], control: [ [500, 200], [700, 500] ] }
    };
    var anim = new YAHOO.util.Motion('demo', attributes1);
	var anim2 = new YAHOO.util.Motion('demo2', attributes2);
	
    YAHOO.util.Event.on('demo-run', 'click', function() {
        anim.animate();
		anim2.animate();
    });
    
})();
</script>