Repeat infinity an animation after loading the page in JavaScript

Question

I have and svg that I want to animate. Is a Wifi signal, so I want to generate the effect of sending wifi signal, the image is:

So the effect is:

-Make red disappear half second (with opacity: 0 or display: none).

-Make blue disappear half second

-Make light-blue disappear half second

-Make yellow disappear half second

-Make purple disappear half second

-Make green disappear half second

-Increase devices transform: scale(1.5); and back again to transform: scale(1)

-Wait for 4 seconds

-Start the animation again

I have tried with

function afterLoad() {
  setInterval(function() {
    var red = document.getElementById("red");
    var blue = document.getElementById("blue");
    var lightblue = document.getElementById("lightblue");
    var yellow = document.getElementById("yellow");
    var purple = document.getElementById("purple");
    var green = document.getElementById("green");
    var x = document.getElementById("devices");

    red.style.display = "none";
    wait(9000);
    red.style.display = "block";
    blue.style.display = "none";
    wait(9000);
    blue.style.display = "block";
    lightblue.style.display = "none";
    wait(9000);
    lightblue.style.display = "block";
    yellow.style.display = "none";
    wait(9000);
    yellow.style.display = "block";
    purple.style.display = "none";
    wait(9000);
    purple.style.display = "block";
    green.style.display = "none";
    wait(9000);
    green.style.display = "block";
  }, 2000);
}

The wait method is comming from this question: Wait 5 seconds before executing next line

function wait(ms) {
  var start = new Date().getTime();
  var end = start;
  while (end < start + ms) {
    end = new Date().getTime();
  }
}

Setting the animation method to execute at the end of the rendering

<body onload="afterLoad()"> ... <body>

I already modified the SVG, and the method is executing successfully, the colors are getting selected and they can hide as the code executes, but not as expected. The problem is that the browser is crashing, it is like getting into a loop until the end of the animation, but it also not appearing. If I ignore the timing and for example, after rendering I just want to hide the yellow, the method will look like this and will perfectly work:

function afterLoad() {
  var yellow = document.getElementById("yellow");
  yellow.style.display = "none";
}

But with the seconds waiting is not working. This is one problem that the animation does not work. Another problem is that also not sure if with that function the animation repeats itself. I also tried with a while(true) with the waiting but that crashes the browser (or almost). Which is the correct way to handle the animation?

Thanks a lot!

terrymorse · Accepted Answer · 2020-05-09T00:17:38.117

That wait() function is a bad idea, as it's synchronous and will block the browser, preventing just about everything.

It's always better to use setTimeout(), which is asynchronous and will allow the display to refresh.

To make using setTimeout easier, you can wrap it in a Promise, then use a promise chain to do your sequential animation.

Here's a wait function that returns a promise, then resolves after a specified time interval:

function waitPromise(interval) {
  return new Promise(resolve => {
    setTimeout(resolve, interval);
  });
}

Here's an animation that's a little like the desired effect, but it uses the asynchronous waitPromise():

function waitPromise(interval) {
  return new Promise(resolve => {
    setTimeout(resolve, interval);
  });
}

async function animate() {
  while (true) {
    await waitPromise(900);
    red.style.opacity = 0;
    await waitPromise(900);
    red.style.opacity = 1;
    blue.style.opacity = 0;
    await waitPromise(900);
    blue.style.opacity = 1;
    lightblue.style.opacity = 0;
    await waitPromise(900);
    lightblue.style.opacity = 1;
    yellow.style.opacity = 0;
    await waitPromise(900);
    yellow.style.opacity = 1;
    purple.style.opacity = 0;
    await waitPromise(900);
    purple.style.opacity = 1;
    green.style.opacity = 0;
    await waitPromise(900);
    green.style.opacity = 1;
  }
}

animate();

<body style="background-color: #aaa">
  <span id="red" style="color:red"> RED </span>
  <span id="blue" style="color:blue"> BLUE </span>
  <span id="lightblue" style="color:lightblue"> LIGHTBLUE </span>
  <span id="yellow" style="color:yellow"> YELLOW </span>
  <span id="purple" style="color:purple"> PURPLE </span>
  <span id="green" style="color:green"> GREEN </span>
</body>

Repeat infinity an animation after loading the page in JavaScript

1 Answers1