In the below code I am trying to loop three functions that only fire once the previous function is complete, with the last function then calling the first to start the process all over again. Using setInterval/setTimout are not going to be good answers for this because of RequestAnimationFrame taking their place as a cleaner way of doing things but I dont know how to apply RequestAnimationFrame to this code. Also the question of why the third function does not call the first wouldn't be answered by using those two methods as well.
var x = document.getElementById("rightBox");
document.getElementById("rightBox").style.animation = "scrollTextTwo 10s";
var x = document.getElementById("rightBoxTwo");
document.getElementById("rightBoxTwo").style.animation = "scrollTextTwo 10s";
var x = document.getElementById("rightBoxThree");
So, I think you have several options: What could work is that you reset the the animation of
rightBox in function
animation: none. If you assign
scrollTextTwo 10s back to the
rightBox it should start again. Equivalent for the other ones.
infinite repeating and some other tricks to create really complex animation timelines, maybe also take a look at the following question.