Anomate on scroll. Clone of https://michalsnik.github.io/aos/ library

animate-on-scroll.html

<style>
/*  aos = animate on scroll */

/* ================== Fade ================== */
[class^='aos-fade'] {
    opacity: 0;
    transition: 1s;
}
[class^='aos-fade'].aos-animate {
    opacity: 1;
    transform: translate(0, 0);
}

.aos-fade-up {
    transform: translate(0, 50px);
}
.aos-fade-down {
    transform: translate(0, 50px);
}
.aos-fade-left {
    transform: translate(50px, 0);
}
.aos-fade-right {
    transform: translate(-50px, 0);
}

/* ================== Zoom ================== */
[class^='aos-zoom'] {
    opacity: 0;
    transition: 1s;
}
[class^='aos-zoom'].aos-animate {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

.aos-zoom-in {
    transform: scale(0.6);
}
.aos-zoom-out {
    transform: scale(1.2);
}

</style>

<!-- Demo style -->
<style>
    section {
        padding: 200px;
    }

    h1 {
        padding: 20px;
        border: 2px solid black;
    }
</style>

<section>
    <h1 class="aos-fade-up">I am animated up</h1>    
</section>
<section>
    <h1 class="aos-fade-down">I am animated down</h1>
</section>
<section>
    <h1 class="aos-fade-left">I am animated left</h1>
</section>
<section>
    <h1 class="aos-fade-right">I am animated right</h1>
</section>


<section>
    <h1 class="aos-zoom-in">I am zoomed in</h1>    
</section>
<section>
    <h1 class="aos-zoom-out">I am zoomed out</h1>
</section>

<script>
    function isElementOutViewport (el) {
        var rect = el.getBoundingClientRect();
        result = (
            rect.top >= 0 &&
            rect.bottom <= window.innerHeight
        );
        // console.log(rect.top)
        // console.log(rect.bottom)
        // console.log(window.innerHeight)
        // console.log('')
        return result;
    }

    var elements = document.querySelectorAll("[class^='aos-']");
    window.addEventListener('scroll', function(){
        elements.forEach(function(elem){
            if (isElementOutViewport(elem)) {
                elem.classList.add('aos-animate');
            } else {
                elem.classList.remove('aos-animate');
            }
        })
    });
</script>