<div class="obj scroll-fadein_zoomin">scroll02</div>

@keyframes opacity {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}
@keyframes zoomin {
	0% {
		transform: scale(0.8);

	}

	100% {
		transform: scale(1);

	}
}

.anime {
	animation-play-state: paused;
	&.active {
		animation-play-state: running !important;
		opacity: 1;
	}
	.scroll-fadein_zoomin {
		animation: opacity 0.8s forwards linear, zoomin 0.3s forwards linear;
		animation-play-state: paused;
	}
}

$(window).on('scroll', function () {

    let elem = $('.obj')
    let isAnimate = 'active anime'
    elem.each(function () {
        let elemOffset = $(this).offset().top
        let scrollPos = $(window).scrollTop()
        let wh = $(window).height()
        const start = elemOffset - wh + (wh / 5)
        const end = elemOffset + wh
        if (scrollPos > start && scrollPos < end) {
            $(this).addClass(isAnimate)
        }
        else if ((scrollPos < start + wh || scrollPos > end + wh)) {
            $(this).removeClass(isAnimate)
        }
    })
})