observer.js

const intersectionObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // element is in viewport, do the stuff
      
      // it's good to remove observer,
      // if you don't need it any more
      observer.unobserve(entry.target);
    }
  });
});

// get your elements, by class name '.js-item'
const elements = [...document.querySelectorAll('.js-item')];

// start observing your elements
elements.forEach((element) => intersectionObserver.observe(element));

Move the observer.unobserve(entry.target); inside the condition otherwise only the first two in view get animated and nothing else.

Thanks! I changed it in the gist, along with isIntersecting.

Move the observer.unobserve(entry.target); inside the condition otherwise only the first two in view get animated and nothing else.

Thanks! I changed it in the gist, along with isIntersecting.

👍 💯