Typewriter effect on title tag

Question

A while ago, I had seen a website whose title tag had an animated typewriter effect somewhat akin to the one embedded in the hyperlink but instead of being used in the body, it was used on the tab title. I can't remember the website and upon trying it in my case failed. How can it be achieved?

HTML

/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

/* Global */
html{
  min-height: 100%;
}
body{
  height: calc(100vh - 8em);
  padding: 4em;
  color: rgba(255,255,255,.75);
  font-family: 'Anonymous Pro', monospace;  
  background-color: rgb(25,25,25);  
}
.line-1{
    position: relative;
    top: 50%;  
    width: 24em;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 180%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);    
}

/* Animation */
.anim-typewriter{
  animation: typewriter 4s steps(44) 1s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 24em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}

<p class="line-1 anim-typewriter">Animation typewriter style using css steps()</p>
<p>
    <b>CSS</b>
</p>

Answer 1

You can use Promises and document.title modification to achieve a typewriter effect on the title.

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
//from: https://stackoverflow.com/a/39914235/14251221

var str = 'Typewriter-Title';
document.title = '';
async function typewriteTitle() {
  for (let i = 0; i < str.length; i++) {
    document.title += str.charAt(i);
    console.log(document.title); //debug only
    await sleep(200);
  }
}
typewriteTitle();

Note: Running it in the snippet won't do anything - it's sandboxed.

Here's the result: