Assegnare una classe ad un tag HTML con jQuery, Bootstrap oppure Javascript quando l'elemento viene visualizzato

[Lattuga]

Aprite questo sito celeberrimo:
https://www.ferrari.com/it-IT
ed osservate le immagini che compongono il layout.
Ho trovato una libreria che mi permette di ricreare lo stesso effetto ovvero far sembrare al visitatore che l'immagine entri nello schermo da destra verso sinistra e viceversa.
Per fare questo basta aggiungere una semplice classe ad un tag. Qui di seguito riporto un esempio simile:

<p class="ABC">HTML.it è un forum di professionisti</p>

Il problema è che appena apro il sito tutte le animazioni partolo nello stesso istante mentre io vorrei che le animazioni comparissero solo quando l'utente arriva al tag <p>. Stavo pensando di creare uno script in jQUery che aggiungesse a <p> la classe ABC quando <p> venga visualizzato ovvero l'utente arrivi a quel preciso punto della pagina, sempreché non esista già una libreria ad hoc. Uno script in js puro mi va bene uguale purché lo stesso funzioni su tutti i browser e sia comprensibile. Uso anche Bootstrap nel layout e non so se per esso esista qualcosa di pronto, io non ho trovato nulla.
Questo è quello che sono stato in grado di scrivere:

$(document).ready(function() {


    if ($('.div_animati').length) {
        eseguiAnimazione();
    }


});


function eseguiAnimazione(){
    $(window).on('scroll',function(){
        $('.div_animati .animate__animated').each(function() {
            if (isScrolledIntoView(this) === true) {
                alert("Questo messaggio non appare!");
                $(this).addClass('animate__fadeInLeft');
            }
        });
    });
}

        <section class="...">
            <div class="container">
                <div class="div_animati ">
                    <h2 class="animate__animated "><i class="..."></i> Prova 1</h2>
                </div>
                <div class="...">
                    <div class="div_animati ">
                        <p class="animate__animated ">Prova 2</p>
                    </div>
                </div>
            </div>
        </section>

Il codice non produce alcun effetto e l'alert non viene neppure visualizzato quando raggiungo 'div_animati' nella pagina.

[U235]

Ciao,
usa IntersectionObserver al posto dello scroll:

var observer = new IntersectionObserver(onIntersection, {
                root: null,
                threshold: .75
            })
            function onIntersection(entries, opts) {
                entries.forEach(entry => {
                    if (entry.isIntersecting === true) {
                        entry.target.children[0].classList.add('in');
                    }
                    else {
                        entry.target.children[0].classList.remove('in');
                    }
                });
            }
            var arr = document.querySelectorAll('.box');
            arr.forEach(el => {
                observer.observe(el);
            });

css:

       .box {
            visibility: hidden;
            height:100px;
        }
        .in {
            visibility: visible;
            position: absolute;
            top:inherit;
            -webkit-animation-name: run;
            -webkit-animation-duration: 5s;
        }
        @-webkit-keyframes run {
            0% {
                left: 100%;
            }
            100% {
                left: 0;
            }
        }

html:

<div class="box">
            <img src="https://www.html.it/app/themes/htmlit/assets/logo/html_logo.svg" width=100 height=100>
        </div>

Funziona anche con il ridimensionamento della finestra.
Qui un esempio.

EDIT:
Ho letto bene dopo... questo funziona solo con browser moderni

[U235]

Qui una versione con scroll:

            var arr = document.querySelectorAll('.box');
            addEventListener("scroll", () => {                
                arr.forEach(el => {
                    if (isScrolledIntoView(el) === true) {
                        el.children[0].classList.add('in');
                    }
                    else
                        el.children[0].classList.remove('in');
                });
            });
            function isScrolledIntoView(el) {
                var rect = el.getBoundingClientRect();
                var elemTop = rect.top;
                var elemBottom = rect.bottom;
                var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
                return isVisible;
            }

[Lattuga]

eccezionale!

bravissimo!

[U235]

eccezionale!

bravissimo!

Non credo sia una cosa da "bravissimo", alle elementari non me lo davano mai quel voto , mentre al mio compagnetto si riusciva a dire le tabelline a memoria, mentre io le calcolavo per la pigrizia di memorizzarle, e quando mi interrogava facevo finta di non aver sentito la prima richiesta e nel frattempo che ripeteva la domanda io calcolavo... Secondo me ero più bravo io sicuramente avevo più tempo per giocare