detect when horizontally animating element reaches center of viewport

Given an animating (transforming) row of images, detect when each one reaches the center so we can make some changes (e.g., adding styling like filter: grayscale)

I’ve enlisted IntersectionObserver and gotten close. In fact my solution works great in Firefox but only works in Chrome if the mouse is moving and doesn’t work at all in Safari. Even if I tweak the options parameter behavior seems sporadic unless in Firefox.

Codepen

const options = {
  root: document.body,
  rootMargin: '0% -50% 0% -50%',
  threshold: 0,
}

const observer = new IntersectionObserver((entries) => { 
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.style.filter = 'grayscale(0%)'
    } else {
      entry.target.style.filter = 'grayscale(100%)'
    }
  })
}, options)

const items = document.querySelectorAll('.img-container img');
items.forEach(img => observer.observe(img))