Time-based Linear Motion with Sinusoidal Rate

Cross-Browser DHTML Animation using the CBE API by Mike Foster, and time-based sinusoidal rate algorithms by Aaron Boodman.

This example uses the slideTo() CBE method.

Here's the CSS for the positioned elements.

.clsCBE {
  position:absolute; visibility:hidden; overflow:hidden;
  margin:0; padding:0; width:64; height:64; clip:rect(0 64 64 0);
  background:transparent; layer-background-color:transparent;
}

Here's the HTML for the positioned elements.

<div id="ele2" class="clsCBE"><img src="../images/circle8.gif" border="0"></div>
<div id="ele1" class="clsCBE"><img src="../images/circle1.gif" border="0"></div>

Here's the javascript for this page:

var ele1, ele2;
function windowOnload() {
  ele1 = document.getElementById('ele1').cbe;
  ele1.addEventListener('drag');
  ele1.resizeTo(64,64);
  ele1.moveTo('center');
  ele1.show();
  ele1.sequence = new Array(
    "slideTo('n',0,1000)",
    "slideTo('e',0,1000)",
    "slideTo('s',0,1000)",
    "slideTo('w',0,1000)"
  );
  ele2 = document.getElementById('ele2').cbe;
  ele2.resizeTo(64,64);
  ele2.moveTo('center');
  ele2.show();
  ele2.sequence = new Array(
    "slideTo('n',0,1000)",
    "slideTo('center',0,1000)",
    "slideTo('ne',0,1000)",
    "slideTo('center',0,1000)",
    "slideTo('e',0,1000)",
    "slideTo('center',0,1000)",
    "slideTo('se',0,1000)",
    "slideTo('center',0,1000)",
    "slideTo('s',0,1000)",
    "slideTo('center',0,1000)",
    "slideTo('sw',0,1000)",
    "slideTo('center',0,1000)",
    "slideTo('w',0,1000)",
    "slideTo('center',0,1000)",
    "slideTo('nw',0,1000)",
    "slideTo('center',0,1000)"
  );
  document.forms['form1'].txtX.focus();
  document.forms['form1'].txtX.select();
}

function handleSubmit() {
  ele1.slideTo(
    document.forms.form1.txtX.value,
    document.forms.form1.txtY.value,
    document.forms.form1.txtT.value
  );
  document.forms['form1'].txtX.focus();
  document.forms['form1'].txtX.select();
  return false;
}