
const image = document.querySelector('.animate-me');
observer = new IntersectionObserver((entries) => {
const [ myImg ] = entries;
if (myImg.intersectionRatio > 0) {
myImg.target.classList.add('fancy');
} else {
myImg.target.classList.remove('fancy');
}
});
observer.observe(image);
Source
https://github.com/roeib/JavaScript-snippets#check-if-a-node-is-in-the-viewport