SketchBookkeeper
3/7/2018 - 9:38 PM

Simple IntersectionObserver starter

/**
* Add 'is-in-viewport' class when element is in viewport
* @author Paul Allen
*/

function createObserver(el) {
	const options = {
		threshold: 1
	}

	const observer = new IntersectionObserver(handleIntersect, options);
	observer.observe(el);
}

function handleIntersect(entries, observer) {
	entries.forEach(function(entry) {
		if (entry.isIntersecting) {
			entry.target.classList.add('is-in-viewport')
		}
	});
}

window.addEventListener('load', () => {
	const imageDetail = document.querySelector( '.js-scroll-in' );

	if (imageDetail) {
		createObserver(imageDetail);
	}
});