I made a loop for a simple animation on my website, and it is running when i switch tabs. the rest of my website does not do this, so that one difference messes everything up. Is there any way i can make it only run when i am on my website-tab?
Code for the animation:
var i = 1;
function loop1() {
setTimeout(function () {
document.getElementById("dollarAnim").animate([
{ opacity: "0" },
{ opacity: "1" },
{ opacity: "0" },
], {
duration: 10000,
iterations: 1,
});
if (i > 0) {
loop1();
}
}, 20000)
}
loop1();<div id="dollarAnim" style="opacity: 0;">$</div>you can add an event listener to window, when the user leaves:
window.addEventListener("blur", function stopAnimation(){});
and when focus again start animation:
window.addEventListener("focus", function sartAnimation(){});