<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>
<div class="anim">For animation</div>

body {
  padding-top: 300px;
  font-family: sans-serif;
}

.anim {
  padding: 50px 30px;
  background-color: #090E20;
  color: #fff;
  margin: 0 auto 20px;
  transition: background-color .5s ease;
  max-width: 400px;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 4px;
}

function sAnim(selector, fun, offset = 0) {
  
  let self = selector;
  let winScrollY = window.scrollY;
  let winHeight = window.innerHeight;

  for (let i = 0; i < self.length; i++) {
    
    let el = self[i];
    let pos = el.getBoundingClientRect();
    let top = pos.top + pageYOffset;
    
    // ДОБАВЛЕНО
    let permission = el.getAttribute('data-sanim');

    // ДОБАВЛЕНО. Проверка разрешена анимация или нет
    if (permission !== 'false') {
      
      if (winScrollY > top - winHeight + winHeight/100*offset && winScrollY - winHeight < top - winHeight) {

        fun(el);
        el.setAttribute('data-sanim', 'false');

      }

    }
  }

}

// ДОБАВЛЕНО. Для производительности
let elemsForAnim = document.querySelectorAll('.anim')

// Что делаем когда элемент в зоне видимости
function showHuntInSelecter(el) {
  el.style.backgroundColor = 'red';
  
  setTimeout(function () {
    el.style.backgroundColor = 'silver';
  }, 1000)
}

let scroll = window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame || window.msRequestAnimationFrame ||
window.oRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000/60) };

let lastPosition = -1;

function loop(){
  if (lastPosition == window.pageYOffset) {
    scroll(loop);
    return false;
  } else lastPosition = window.pageYOffset;
    // Вызов функции при скролле
      sAnim(elemsForAnim, showHuntInSelecter, 30);

  scroll(loop);
}; loop();