Demo of intersection observer inspired by Alligator.io

easyIntersectionObserver.js

/* 
Use this to easily add a fading effect to elements using IntersectionObserver, 
intersectionObserver will "watch" for elements visibility on the page
*/

(function () {
  myImgs = document.querySelectorAll('img');

  observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.intersectionRatio > 0 && entry.isIntersecting === true) {
        console.log('in the view');
      console.log(entry)
        entry.target.style.opacity = '1';
  entry.target.style.transform = 'scale(1)';  
  entry.target.style.transition = 'all 1s ease';
      } else {
          console.log(entry)
          entry.target.style.opacity = '0';
          entry.target.style.transform = 'scale(1.2)';
          entry.target.style.transition = 'all 1s ease';
        console.log('out of view');
      }
    });
  }, {rootMargin:'50px',threshold:0.2});

  myImgs.forEach(image => {
    observer.observe(image);
  });

}());