JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<div class="somebody">Scroll down for element</div>
<div id="foo">Test text</div>
<div class="somebody"></div>

CSS

/* Это для теста, типа анимация */

@-webkit-keyframes blinker {  
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

.blink {
  -webkit-animation-name: blinker;  
  -webkit-animation-iteration-count: infinite;  
  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  -webkit-animation-duration: 1.7s; 
   border: 1px solid #ccc;
   font: bold 18px Arial;
}

.somebody {
    height: 800px;
}

JavaScript

console.clear();

// Это jQuery плагин, проверяющий наличе элемента на странице
!function(){
    $.fn.isOnScreen = function(){
        var win = $(window),
            viewport = {
                top : win.scrollTop(),
                left : win.scrollLeft()
            };

        viewport.right = viewport.left + win.width();
        viewport.bottom = viewport.top + win.height();
     
        var bounds = this.offset();
        bounds.right = bounds.left + this.outerWidth();
        bounds.bottom = bounds.top + this.outerHeight();
     
        return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
    }
}(jQuery);

// Это уже сам код, который отвечаети за старт анимации
$(function(){
    var $foo = $('#foo'), // твой элемент
        timeout;

    $(window).scroll(function(){
        
        // изинг-функция, чтобы при скроле браузер не повесился
        if (!timeout){
            timeout = setTimeout(function(){
                // $foo.isOnScreen() - проверка что твой элемент стал видимым
                // Нужно будет еще следить, чтобы анимация не делала рестарт
                // (у меня за это отвечает !$foo.hasClass('blink')
                if (!$foo.hasClass('blink') && $foo.isOnScreen()){

                    // чистим таймер
                    clearTimeout(timeout);
                    timeout = 0;

                    // старт тестовой анимации
                    $foo.addClass('blink');

                    // чисто для отладки в консоли видеть момент срабатывания
                    console.log(1);
                }
            }, 2000)
        }
    });    
});