# Time-Based Elliptical Motion Cross-Browser DHTML Animation using the CBE API by Mike Foster. This example uses the ellipse() CBE method.
X |  | X radius
Y |  | Y radius
I |  | Radius increment
T |  | Time in milliseconds
S |  | Start angle in degrees
P |  | Stop angle in degrees
### 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/circle6.gif" border="0"></div>
    <div id="ele3" class="clsCBE"><img src="../images/circle3.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, ele3;
    function windowOnload() {
      init();
    }
    function init() {
      ele1 = document.getElementById('ele1').cbe;
      ele1.moveTo('center');
      ele1.show();
      ele1.sequence = new Array(
        "ellipse(100,50,2, 4000,0,1440)",
        "ellipse(200,100,-2,4000,0,-1440)"
      );
      ele2 = document.getElementById('ele2').cbe;
      ele2.moveTo('center');
      ele2.moveBy(200,0);
      ele2.show();
      ele2.sequence = new Array(
        "ellipse(100,200,0,1000,0,-360)",
        "ellipse(100,200,0,1000,0,360)",
        "ellipse(100,200,0,2000,0,-720)",
        "ellipse(100,200,0,2000,0,720)"
      );
      ele3 = document.getElementById('ele3').cbe;
      ele3.moveTo('center');
      ele3.show();
      ele3.sequence = new Array(
        "ellipse(50,100,0,2000,90,450)",
        "ellipse(50,100,0,2000,-90,-450)"
      );
      document.forms['form1'].txtX.focus();
      document.forms['form1'].txtX.select();
    }
    function handleSubmit() {
      ele1.ellipse(
        document.forms.form1.txtX.value,
        document.forms.form1.txtY.value,
        document.forms.form1.txtI.value,
        document.forms.form1.txtT.value,
        document.forms.form1.txtS.value,
        document.forms.form1.txtP.value
      );
      document.forms['form1'].txtX.focus();
      document.forms['form1'].txtX.select();
      return false;
    }
    function startCycle() {
      ele1.startSequence();
      ele2.startSequence();
      ele3.startSequence();
    }
    function stopCycle() {
      ele1.stopSequence();
      ele2.stopSequence();
      ele3.stopSequence();
    }
### Here's the onClick handler for the "Start Sequence" button.
    onclick="startCycle()
### Here's the onClick handler for the "Stop" button.
    onclick="stopCycle()