<div>
  <span class="header__word1-letter">L</span>
  <span class="header__word1-letter">o</span>
  <span class="header__word1-letter">r</span>
  <span class="header__word1-letter">е</span>
  <span class="header__word1-letter">m</span>
  <span class="header__word1-letter">i</span>
  <span class="header__word1-letter">p</span>
  <span class="header__word1-letter">s</span>
  <span class="header__word1-letter">u</span>
  <span class="header__word1-letter">m</span>
  <span class="header__word1-letter">d</span>
</div>
<div>
  <span class="header__word2-letter">L</span>
  <span class="header__word2-letter">o</span>
  <span class="header__word2-letter">r</span>
  <span class="header__word2-letter">e</span>
  <span class="header__word2-letter">m</span>
  <span class="header__word2-letter">і</span>
  <span class="header__word2-letter">p</span>
  <span class="header__word2-letter">s</span>
  <span class="header__word2-letter">u</span>
  <span class="header__word2-letter">m</span>
  <span class="header__word2-letter">d</span>
  <span class="header__word2-letter">o</span>
</div>
div{
  width: 300px;
  height: 40px;
}
span{
  display: block;
  float: left;
}
span.active{
  transform: translateY(-12px);
}

var letters_word1 = document.getElementsByClassName("header__word1-letter");
var y = 0, l = 0;
var letters_word2 = document.getElementsByClassName("header__word2-letter");

setInterval(function(){
  console.log(y);
  q = setInterval(mooveLetter1, 100);
  p = setInterval(mooveLetter2, 100);
}, 4000)

function mooveLetter1(){
  console.log(y);
  if(y >= letters_word1.length){
    clearInterval(q);
    y = 0;
  }else{
    letters_word1[y].classList.toggle("active");
    y++;
  }
}
function mooveLetter2(){
  if(l >= letters_word2.length){
    clearInterval(p);
    l = 0;
  }else{
    letters_word2[l].classList.toggle("active");
    l++;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.