JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="flex">
    <div class="box">
        <img class="kfn_anim" data-kfn="scale" data-pct="0.5" src="http://picsum.photos/600/600" alt="">
    </div>
    <div class="box">
        <img class="kfn_anim" data-kfn="scale" data-pct="0.3" src="http://picsum.photos/600/600" alt="">
    </div>
</div>
<div style="height: 100vh;"></div>

CSS

body {
    margin:0; 
}
* {
    box-sizing: border-box;
}
.kfn_anim {/* 
    width: 200px;
    height: 200px;
    margin-top: 120vh;
    background: red; */
}
.slideUp {
    animation: slideUp 1s both;
}
@keyframes slideUp {
    from {
        visibility: hidden;
        transform: translate3d(500px,0,0);
        opacity: 0;
    }
    to {
        visibility: visible;
        transform: translate3d(0px,0,0);
        opacity: 1;
    }
}
.box {
    width: 400px;
    height: 400px;
    margin: auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100vh;
}
.box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.scale {
    animation: scale cubic-bezier(0, 0.59, 0.19, 0.99) 1.5s both;
}
@keyframes scale {
    from {
        visibility: hidden;
        opacity: 0;
        transform: scaleX(1.5);
    }
    to {
        visibility: visible;
        opacity: 1;
        transform: scaleX(1);
    }
}
.flex {
    display: flex;
}

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++) {
        	var vHeight = window.innerHeight * elements[i].dataset.pct;
            elements[i].style.visibility = 'hidden';
            var elementData = elements[i].dataset.kfn;
            if (window.scrollY > offset(elements[i]).top - window.innerHeight + vHeight) {
                elements[i].classList.add(elementData)
            }
        }
    }

    kfn_anim();
    window.addEventListener('scroll',kfn_anim);
    window.addEventListener('resize',kfn_anim);