Resetting a simple animation in javascript

Question

I am trying to do a simple animation in javascript. I'd like to start the animation when pressing the "Click Me" button, to reset it by pressing it again and to restart it by pressing it a third time.

The code I am pasting stops working after resetting the animation. What am I doing wrong?

I tried to add some logs to track my variables but I really can't understand the problem.

var terminateConditionFullfiled;

function ClickManager() {
  var elem = document.getElementById("animate");
  var pos_top = elem.style.top;
  var pos_left = elem.style.left;
  if (pos_top != 0 && pos_left != 0) {
    elem.style.top = 0 + "px";
    elem.style.left = 0 + "px";
    terminateConditionFullfiled = true;
    WritePosition(elem);
    var tt = document.getElementById("tt");
    tt.innerHTML = "terminateConditionFullfiled = " + terminateConditionFullfiled;
  } else {
    terminateConditionFullfiled = false;
    myMove();
    var tt = document.getElementById("tt");
    tt.innerHTML = "terminateConditionFullfiled = " + terminateConditionFullfiled;
  }
}

function myMove() {
  var elem = document.getElementById("animate");
  var pos = 0;
  var id = setInterval(frame, 5);

  function frame() {
    if (terminateConditionFullfiled) {
      return;
    }
    if (pos == 350) {
      clearInterval(id);
      Back();
    } else {
      pos++;
      elem.style.top = pos + "px";
      elem.style.left = pos + "px";
      WritePosition(elem);
    }
  }
}

function Back() {
  var elem = document.getElementById("animate");
  var pos = 350;
  var id = setInterval(frame, 5);

  function frame() {
    if (terminateConditionFullfiled) {
      return;
    }
    if (pos == 0) {
      clearInterval(id);
      myMove();
    } else {
      pos--;
      elem.style.top = pos + "px";
      elem.style.left = pos + "px";
      WritePosition(elem)
    }
  }
}

function WritePosition(elem) {
  var log = document.getElementById("log");
  log.innerHTML = elem.style.top + " " + elem.style.left;
}

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}

#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}

<p><button onclick="ClickManager()">Click Me</button></p>
<p id="log">Log is here </p>
<p id="tt">terminateConditionFullfiled = </p>
<div id="container">
  <div id="animate"></div>
</div>

Do you want to reset the animation on the second click and when you click again its resumes from the last moved position? — Thanveer Shah, Jun 15 '20 at 08:44
No, I want to reset the animation on the second click on the position (0,0), then on a third click the animation will restart from (0,0) and start moving bottom right. — user13748410, Jun 15 '20 at 08:51

Uchendu · Accepted Answer · 2020-06-15T13:46:14.690

The problem comes from your condition if (pos_top != 0 && pos_left != 0). There you should take a look at the content of your variables pos_top and pos_left.

During the first click, the content is "" (an empty string), which returns true in your condition. Find out why.

On the second and third click you may have pos_top == 123px. Important to see there is px added at the end. This causes your condition always to be true and hence it works only the first time.

You could replace this condition with a global variable running which is set to true when the animation runs and false when stopped.

Below a small example which prints out the values of pos_top before and after being defined through javascript.

let box = document.getElementById("animate")
console.log("The actual position of the box is: " + box.style.top)
console.log("Let's specify the position now through JS")
box.style.top = "20px"
console.log("The actual position of the box is: " + box.style.top)

#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}

<div id="animate"></div>

@user13748410 You're welcome! Feel free to accept the answer as accepted, so people find the correct answer later faster :) — Uchendu, Jun 16 '20 at 06:24

score -1 · Answer 2 · answered Jun 15 '20 at 12:34

-1

So if i understand you want on the second click reset animation then the object reaching (0,0)?

answered Jun 15 '20 at 12:34

Žygimantas Pusvaškis

17
3

Resetting a simple animation in javascript

2 Answers2