Animate.css: trigger animation when becoming visible while scrolling

@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! ;)