[samdo]

В общем сделал таким способом, но не нравится то, что первое и последнее изображение быстро пропадают (удаляется класс visible). Это можно как то отрегулировать? Какой только threshold не пробовал, не подходит.

const items = Array.from(document.querySelectorAll('.grid .block'));
const imgs = document.querySelectorAll('.fading img');

function detectIntersection(entries) {
  for (let e of entries) {
    let i = items.indexOf(e.target);
    if (e.isIntersecting) {
      requestAnimationFrame(ts => {
        e.target.classList.add('visible');
        imgs[i].classList.add('visible');
      });
    } else {
      e.target.classList.remove('visible');
      imgs[i].classList.remove('visible');
    }
  }
}

const options = {
  threshold: 0.5
};

const observer = new IntersectionObserver(
  detectIntersection, options
);

items.forEach(i => observer.observe(i));