I found a script here to query the browser tab activity and wanted to combine that with a function that plays a small title animation when inactive.

Apart from the fact that i can still optimize the performance somewho, one error symbols are displayed on each side when the train has passed through once.

At first I thought it was the emoji (two combined emoji), but it happens to others too. Anyone have an idea?

var vis = (function () {
    var stateKey, eventKey, keys = {
        hidden: "visibilitychange",
        webkitHidden: "webkitvisibilitychange",
        mozHidden: "mozvisibilitychange",
        msHidden: "msvisibilitychange"
    };
    for (stateKey in keys) {
        if (stateKey in document) {
            eventKey = keys[stateKey];
            break;
        }
    }
    return function (c) {
        if (c) {
            document.addEventListener(eventKey, c);
            //document.addEventListener("blur", c);
            //document.addEventListener("focus", c);
        }
        return !document[stateKey];
    };
})();

var storeTitle = document.title,
    myAnimation;

function getLokTitle() {

    let title = "_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 🚂 ",
        //let title = "_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 🚄 ",
        i = 0;

    myAnimation = setTimeout(function () {
        setInterval(function () {
            document.title = title.substr(i, title.length) + title.substr(0, i);
            i = (i + 1) % title.length;

            if (vis() === true) {
                clearTimeout(myAnimation);
                document.title = storeTitle;
                return storeTitle;
            }
        }, 250);
    }, 1000);

    return title;
}

function getStoreTitle() {

    if (typeof myAnimation !== "undefined") {
        clearTimeout(myAnimation);
    }
    return storeTitle;
}

vis(function () {
    document.title = vis() ? getStoreTitle() : getLokTitle();
    //console.log(new Date, 'visible ?', vis());
});

// to set the initial state
document.title = vis() ? getStoreTitle() : getLokTitle();