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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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(){});