Ahh found a good example.
So the code ( single code used on scene load and unload ) would look something like
if (event.type === "HypeSceneLoad" ){ //- Run animation
var imageNumber = 1;
var imgcontainer = hypeDocument.getElementById("imgcontainer")
window.globalID;
repeatOften()
function repeatOften() {
if (imageNumber < 100){ //-- image total is 101
imgcontainer.style.backgroundImage = 'url( ${resourcesFolderName}/test_' + ('0' + imageNumber).slice(-2) + '.gif)'
imageNumber++
} else {
cancelAnimationFrame(window.globalID);//- Stop animation call
}
window.globalID = requestAnimationFrame(repeatOften);
}
}else {
console.log("stopped")
cancelAnimationFrame(window.globalID); //- Stop animation call
}
test_MHv3.hype.zip (1.5 MB)
I assume this is better because it works on the natural frame rate of the browser which is what this example is aiming for, so thats why it is better in this case ?..