I tried to make an animation on javascript.

It should look like:

Frame 1:

ඞ______ _

Frame 2:

_ඞ_____ _

Frame 3:

__ඞ____ _

Frame 4:

___ඞ___ _

I want to something that changes the text after some seconds. So I’ve got a label and this is a snippet of a code.

document.getElementById('label').innerHTML='ඞ______ _';

sleep(500);

But if I use the sleep function, the page ‘waits’ until my ‘animation’ is finished and then I can see the last text:

___ඞ___ _

Is there a way to solve this problem?

>Solution :

You should use a async function for updating the animation at the same time of doing the other stuff your javascript is doing.

an async function looks like this

async renderAnimation () {
    setTimeout(() => {this.animate() }, 500);  
}

animate(){
    document.getElementById('label').innerHTML='ඞ______ _';
}

You should check this link for a more in deep explanation of async: https://www.w3schools.com/js/js_async.asp