How can I start over a offset(); function repeatedly

so I've spent a lot of time making this code, it works, but the only bug that I can't fix is to make it circling repeatedly.Could anyone give some suggestion about the problem and it's solution? Thanks in advanced.

 <h1 id="heading">Hello</h1>

 var offsetLeft = 0;
 var offsetTop = 0;
 var offsetLeftReverse = 200;
 var offsetTopReverse = 200;

 var moveHeading = function () {
     $("#heading").offset({ left: offsetLeft, top: offsetTop});

    if(offsetLeft < 200){
        offsetLeft++;
    } else if (offsetTop < 200){
        offsetTop++;
    }
 };

var moveHeadingReverse = function () {
     $("#heading").offset({ left: offsetLeftReverse, top: offsetTopReverse});

    if(offsetLeftReverse > 0 ){
        offsetLeftReverse--;
    } else if (offsetTopReverse > 0){
        offsetTopReverse--; 
    } 
 };

var engine = function () {
   if ( (offsetTop === 0 && offsetLeft <= 200) || (offsetTop < 200 && offsetLeft === 200) ){
        moveHeading(); 
    } 
   else if ( (offsetTopReverse === 200 && offsetLeftReverse <= 200) || (offsetTopReverse <= 200 && offsetLeftReverse === 0) &&
            ( offsetTopReverse != 0 || offsetLeftReverse != 0 ) ){
       moveHeadingReverse();
       console.log("reverse");
       console.log(offsetTopReverse,offsetLeftReverse);
    } 
}

var start = setInterval(engine, 5);