Cacher is the code snippet organizer for pro developers

// Configuration object for the Intersection Observer
const config = {
  // How much of the element needs to be in viewport to trigger intersection (between 0 and 1)
  threshold: 0.25
};

// Create new Intersection Observer
let observer = new IntersectionObserver(handler, config);
 
// Define handler that can manage multiple "observable" elements
// entries:  array of HTML elements determined by .querySelectorAll (below)
// handler is triggered when an element ENTERS or EXITS
function handler(entries, observer) {
  
  for (entry of entries) {
    
    if (entry.isIntersecting) {
      // a.k.a if element ENTERED --- do whatever you want
      console.log("Entered view");
      entry.target.classList.add("in-view");
    } else {
      // a.k.a if element EXITED --- do whatever you want (or do nothing)
      console.log("Exited view");
      entry.target.classList.remove("in-view");
    }
  }
}
 
// Selecting multiple elements to observe
var myElements = document.querySelectorAll(".whatever-class-you-want");
// Adding observer on each element 
myElements.forEach(element => {
  observer.observe(element);
});