I don't know how to loop my animation in sync with traffic lights

I have this code below I have made and I am attempting to run the animation when the traffic light is on green/index=2. i have literally tried everything i can so please any boffins out there show me how to loop these two parts of the code in sync.

<!DOCTYPE html>
<html>
<body>
<h1>The best GCSE traffic lights sequence any examiner has ever seen!</h1>
<img id="light" src="Traff 1.jpg">
<style>
#container {
  width: 600px;
  height: 475px;
  position: absolute;
  background: #000;
}
#animate {
  width: 300px;
  height: 170px;
  position: absolute;
  background: url(car.jpg);
}
</style>
<div id ="container">
<div id ="animate"></div>
</div>

<script>
var list = [
     "Traff 1.jpg",
     "traff 2.jpg",
     "traff 3.jpg",
     "traff 4.jpg"
];

var index = 0;
(function nextlight() {
	setInterval(function(){ index = index + 1;

    if (index == 4) index = 0;

    var image = document.getElementById('light');
    image.src=list[index]; }, 3000);

    
})()

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

Solution

It's simple. You just need a check in the function frame so that it moves the position only if the index is 2.

function frame() {
    if (index !== 2) {
        return;
    }
    ...
}

Working example (used colors instead of images):

<!DOCTYPE html>
<html>

<body>
  <h1>The best GCSE traffic lights sequence any examiner has ever seen!</h1>
  <!-- <img id="light" src="Traff 1.jpg"> -->
  <div id="light">Traff Light</div>
  <style>
    #container {
      margin: 30px 0;
      width: 900px;
      height: 500px;
      position: absolute;
      background: #000;
    }
    #animate {
      width: 300px;
      height: 170px;
      position: absolute;
      background: blue;
      /* background: url(car.jpg); */
    }
    #light {
      background: red;
      border: 5px solid cyan;
      height: 50px;
      width: 100px;
    }
  </style>
  <div id="container">
    <div id="animate"></div>
  </div>

  <script>
    var list = [
      "Traff 1.jpg",
      "traff 2.jpg",
      "traff 3.jpg",
      "traff 4.jpg"
    ];

    var tlight = ['red', 'yellow', 'green', 'grey'];

    var index = 0;
    (function nextlight() {
      setInterval(function() {
        index = index + 1;

        if (index == 4) index = 0;

        var image = document.getElementById('light');
        //image.src = list[index];
        image.style.background = tlight[index];
      }, 3000);

    })();
  </script>
  <script>
    (function myMove() {
      var elem = document.getElementById("animate");
      var pos = 0;
      var id = setInterval(frame, 10);

      function frame() {
        if (index !== 2) {
          return;
        }
        if (pos == 300) {
          pos = 0;
        } else {
          pos++;
          elem.style.top = pos + 'px';
          elem.style.left = pos + 'px';
        }
      }
    })();
  </script>
</body>

</html>