<div class="obj scroll-fadein2">scroll03</div>

@keyframes opacity2 {
	0% {
		opacity: 0;
		filter: blur(20px);
	}

	30% {
		opacity: 0.3;
		filter: blur(20px);
	}

	100% {
		opacity: 1;
		filter: blur(0);

	}
}

.anime {
	animation-play-state: paused;
	&.active {
		animation-play-state: running !important;
		opacity: 1;
	}
	&.scroll-fadein2 {
		opacity: 0;
		animation: opacity2 0.6s forwards ease-in-out;
		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)
        }
    })
})