Как создать эффективную бесконечно циклическую размахивающую текстовую анимацию?

Question

Это эффект, который я пытаюсь создать (JSFiddle):

$('.header h1 span').each(function() { // each letter is contained inside a <span> element 
    var that = $(this); 
    setTimeout(function() { 
     that.animate({ 
       top: "-10px" 
      }, animateTime/2) 
      .animate({ 
       top: "10px" 
      }, animateTime/2); 
    }, that.index() * 100); 
}); 

Результат:

Оказывается, чтобы быть успешным. Тем не менее, я столкнулся с проблемой его, глядя, как это после переключения вкладок, а затем возвращается:

В вышеприведенной скрипке, я пытался «исправить» это путем анимация останавливается, когда вкладка не сфокусирована. Это лучше, чем когда я НЕ проверял, чтобы вкладка не фокусировалась, но у нее все еще есть проблемы. Это код, я использую, чтобы сделать это:

var running = true; 

document.addEventListener('visibilitychange', function(){ 
    console.log("Running:" + running); 
    running = !document.hidden; 
    if(!running) clearQueues(); 
}) 

Если пользователь тратит меньше, чем на пару секунд нефокусированных из вкладки, анимация выглядит как второй GIF снова, и я не вижу способа чтобы избежать этого. Я пробовал использовать requestAnimationFrame(), но я не могу понять, как заставить его вести себя правильно.

Итак, мой вопрос: Как предотвратить, чтобы анимация не была затронута тем, что вкладка не сфокусирована?

Бонусные баллы (образно), если вы можете помочь мне сделать его более эффективным на мобильных устройствах.

Answer 1

Я не уверен, что это решает заикаться за вас или нет. Эта стратегия похожа на концепцию того, что вы делаете, но использует CSS-анимацию, а не js.

(function(){ 
 
    
 
    var el = document.querySelectorAll(".wavey")[0]; 
 
    var oldText = el.innerText 
 
    var newHtml = ""; 
 
    for (var i in el.innerText) { newHtml += ("<span style='animation-delay: " + i/10 + "s;'>" + oldText[i] + "</span>"); } 
 
    el.innerHTML = newHtml; 
 
    
 
})();

@keyframes wave { 
 
    from { transform: translateY(0); } 
 
    to { transform: translateY(-1em); } 
 
} 
 

 
h1.wavey { margin-top: 2em; } 
 

 
h1.wavey span { 
 
    display: inline-block; 
 
    animation-duration: 1s; 
 
    animation-name: wave; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
    animation-timing-function: ease-in-out; 
 
}

<h1 class="wavey">Hello World</h1>