Javascript animation

1

Hello, i’m trying to learn some js animations. I copied some source code from w3schools that makes a rectangle (the animate div) travel diagonally right across a larger rectangle (container div). Here is the original code:

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p>
<button onclick="myMove()">Click Me</button>
</p> 

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

<script>
function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + 'px'; 
      elem.style.left = pos + 'px'; 
    }
  }
}
</script>

</body>
</html>

But the problem is, i want to make a second block going in the opposite corner and make them crossover each other, but i cant get the other block to move for some reason. I’m very new to js, so apologies if it’s obvious.

This is what i tried:

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
#animate2 {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: blue;
}
</style>
<body>

<p>
<button onclick="myMove(); myMove2();">Click Me</button>
</p> 

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

<script>
function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + 'px'; 
      elem.style.left = pos + 'px'; 
    }
  }
}
function myMove2() {
  var elem = document.getElementById("animate2");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.bottom = pos + 'px'; 
      elem.style.right = pos + 'px'; 
    }
  }
}
</script>

</body>
</html>

Edit: i got the other block to move with this code, but now the problem is both of the squares are in the top left corner in the beginning when i need them be start at opposite corners and end at opposites

2

We need to see your code to know what you have tried. And a link to the code you are talking about would be nice as well. Is it this one?

If it is that one, then you can pretty much just duplicate most of the code and add another element that just does the opposite.

BTW, the JavaScript on w3schools is often fairly poor and “old school” (var everywhere and globals, etc.). You can still learn from it, it’s just not great code.

3

Hello! sorry i tried putting my code yesterday but it didn’t show up for some reason, now it’s there. And it is the same code you linked but after trying to copy the function and adding another element, the blue one (the new one) isn’t moving at all, it’s stuck in the corner and i don’t know what is causing that. And thank you for trying to help :slight_smile:

Edit: i got the other block to move with this code, but now the problem is both of the squares are in the top left corner in the beginning when i need them be start at opposites corners and end at opposites

4

Once you have them working individually: setInterval blocks, ie it stops everything else from running when it is running, so you can only do one of your things at once.

You can write the logic to move the elements seperately, but you need to have only one setInterval (you then call the functions inside that).

1 Like
5

Start the other one at 350 and decrement it down to 0.

1 Like
6

Thanks for the explanation, got it working :slight_smile: