Animate.css: trigger animation when becoming visible while scrolling

I'm experimenting with animate.css.

My code:

<h2 class="lazyload animate__animated animate__rotateInDownLeft" data-link="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">Lorem ipsum</h2>

Please, don't be afraid of animate.css being loadeded lazily here.

My page: https://galina.xyz/makiyazh/oshibki-pri-makiyazh

We are interested in the bottommost h2 with the text "Lorem ipsum".

The problem

This works perfectly when I reload the screen with the h2. That is when it is already visible.

But what I'm looking for is an animation effect while scrolling. That is the H2 should start moving only when it has been scrolled to.

Is it possible?

@Mohammed animate-dynamic solution use jQuery.

This one instead is a simple solution in vanilla JS using Animate.css, Waypoints and a few lines of css:

javascript:

//https://stackoverflow.com/a/74810616/3929620
//https://stackoverflow.com/a/32677672/3929620
//https://stackoverflow.com/a/69614783/3929620
const animateList = [].slice.call(document.querySelectorAll('.__animate__animated'))
animateList.map(function (animateEl) {
    new Waypoint({
        element: animateEl,
        offset: 'bottom-in-view',
        handler: function(direction) {
            //https://stackoverflow.com/a/56914528/3929620
            animateEl.className = animateEl.className.replace(/__animate__/g, 'animate__')
            this.destroy()
        },
    })
})

css:

/* https://www.w3.org/TR/selectors/#attribute-substrings */
[class*="__animate__"] {
    opacity: 0;
}

html:

<div class="__animate__animated __animate__fadeIn">
    <!-- your code here -->
</div>

Any improvement is welcome! ;)