JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="custom kfn_anim" data-kfn="slideUp"></div>

CSS

@keyframes slideUp {
    from {
        visibility: visible;
        transform: translate3d(0,100%,0);
        opacity: 0;
    }
    to {
        visibility: visible;
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}
.slideUp {
    animation: slideUp 1s both;
}


.custom {
    width: 200px;
    height: 200px;
    background: red;
}

JavaScript

function offset(el) {
        var rect = el.getBoundingClientRect(),
        scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
        scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
    }
    var kfn_anim = function(){
        var elements = document.querySelectorAll('.kfn_anim');
        for (var i = 0; i < elements.length; i++) {
             elements[i].style.visibility = 'hidden';
            var elementData = elements[i].dataset.kfn;
            if (window.scrollY > offset(elements[i]).top - window.innerHeight) {
                elements[i].classList.add(elementData)
            }
        }
    }
    kfn_anim();