# Time-based Resize with Sinusoidal Rate ### slideCornerby() and slideCornerTo() Cross-Browser DHTML Animation using the CBE API by Mike Foster. This example uses the slideCornerBy() CBE method.
C |  | Corner: ne, se, sw, or nw
X |  | Change in X-Coordinate
Y |  | Change in Y-Coordinate
T |  | Time in Milliseconds
### Here's the CSS for the positioned elements.
    .clsCBE {
      position:absolute; visibility:visible;
      margin:0; padding:0; width:100; height:100; clip:rect(0 100 100 0);
      color:#ffffff; background:#000000;
    }
### Here's the HTML for the positioned elements.
    <div id="ele1" class="clsCBE">ele1</div>
    <div id="ele2" class="clsCBE">ele2</div>
    <div id="ele3" class="clsCBE">ele3</div>
### Here's the javascript for this page:
    var ele1, ele2, ele3;
    function windowOnload() {
      ele1 = document.getElementById('ele1').cbe;
      ele1.background('#ff8888');
      ele1.sequence = new Array(
        "slideCornerBy('nw',-100,-100,1000)",
        "slideCornerBy('nw',100,100,1000)",
        "slideCornerBy('ne',100,-100,1000)",
        "slideCornerBy('ne',-100,100,1000)",
        "slideCornerBy('se',100,100,1000)",
        "slideCornerBy('se',-100,-100,1000)",
        "slideCornerBy('sw',-100,100,1000)",
        "slideCornerBy('sw',100,-100,1000)"
      );
      ele2 = document.getElementById('ele2').cbe;
      ele2.background('#88ff88');
      ele2.sequence = new Array(
        "slideCornerBy('ne',100,0,1000)",
        "slideCornerBy('nw',100,0,1000)",
        "slideCornerBy('nw',0,-100,1000)",
        "slideCornerBy('sw',0,-100,1000)"
      );
      ele3 = document.getElementById('ele3').cbe;
      ele3.background('#8888ff');
      ele3.sequence = new Array(
        "slideCornerBy('ne',0,70-ph,1000)",
        "slideCornerBy('se',0,70-ph,1000)",
        "slideCornerBy('nw',70-pw,0,1000)",
        "slideCornerBy('ne',70-pw,0,1000)",
        "slideCornerBy('se',0,ph-70,1000)",
        "slideCornerBy('ne',0,ph-70,1000)",
        "slideCornerBy('se',pw-70,0,1000)",
        "slideCornerBy('nw',pw-70,0,1000)"
      );
      init();
    }
    function init() {
      ele1.resizeTo(50,50);
      ele1.moveTo('center');
      ele1.show();
      ele2.resizeTo(50,50);
      ele2.moveTo('sw',10);
      ele2.show();
      ele3.resizeTo(50,50);
      ele3.moveTo('se',10);
      ele3.show();
      document.forms['form1'].txtC.focus();
      document.forms['form1'].txtC.select();
      return false;
    }
    function handleSubmit() {
      ele1.slideCornerBy(
        document.forms['form1'].txtC.value,
        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;
    }
    function startCycle() {
      init();
      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()

ele1
ele2
ele3