Same IntersectionObserver for mutiple elements - how to properly target intersected element with classList.add()

Question

I'm working with the great code provided here by Ziyad and Ruslan Korkin, but when I want to use Classlist on the entry.target, I get stuck ... classList.add or classList.remove does not work as expected.

In the part of this code where element is intersecting, how can I properly target the one intersecting element and add/remove class from classList on it? I can fire some JS there okay (.remove works), but classList.add does not. What am I missing?

let observerOptions = {
rootMargin: '0px',
threshold: 0.5
}

var observer = new IntersectionObserver(observerCallback, observerOptions);

function observerCallback(entries, observer) {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
          //do something
          // want to do entry.target.classList.add('square-transition');

        }
          // want to do entry.target.classList.remove('square-transition');
    });
};

let target = '.targetSelector';
document.querySelectorAll(target).forEach((i) => {
    if (i) {
        observer.observe(i);
    }
});

score 0 · Answer 1 · answered Sep 11 '22 at 20:55

You were missing an else statement that would be triggered whenever the entry is not intersecting.

function observerCallback(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('square-transition');
    } else {
      entry.target.classList.remove('square-transition');
    }
  });
};

Same IntersectionObserver for mutiple elements - how to properly target intersected element with classList.add()

1 Answers1