How do I animate title of site in browser tab?

Question

How do I animate site title of site in browser tab like this?

Screen capture GIF:

Check [this answer](https://stackoverflow.com/questions/23731357/how-do-i-make-text-inside-the-title-tag-animate-using-javascript). — Sam, Oct 24 '17 at 23:29

score 1 · Answer 1 · answered Oct 24 '17 at 23:39

You can add a scroll animation to the title of your browser tab using this Javascript code:

msg = "Title";
msg = " ...Just a scrolling title example" + msg;position = 0;
function scrolltitle() {
document.title = msg.substring(position, msg.length) + msg.substring(0, position); position++;
if (position > msg.length) position = 0
window.setTimeout("scrolltitle()",170);
}
scrolltitle();

theGleep · Answer 2 · 2017-10-24T23:31:45.737

0

use window.setTimeout() or window.setInterval() and change document.title

edited Oct 24 '17 at 23:31

answered Oct 24 '17 at 23:28

theGleep

1,179
8
14

It is not the window.location, it is the title – Oct 24 '17 at 23:30
Oops. You're 100% right. I fixed it. – theGleep Oct 24 '17 at 23:31

score 0 · Answer 3 · answered Oct 24 '17 at 23:37

This is pure js...

function recursiveAnimateTitle(string) {
  let firstLetter = string[0];
  let title = document.querySelector('title');
  title.innerHTML += firstLetter;
  if (string.length > 1) {
    setTimeout(function() {
      recursiveAnimateTitle(string.substring(1));
    }, 100);
  }
}

function animateTitle(string) {
  document.querySelector('title').innerHTML = "";
  recursiveAnimateTitle(string);
}

animateTitle('Example Title');

<head>
  <title>Some Default Title</title>
</head>
<body></body>

If you want to vary the time for each letter, use math.random with a range.

With a distribution if you want to get really weird with it.

How do I animate title of site in browser tab?

3 Answers3