How to remove IntersectionObserver correct

Question

I have animation on enter window on middle of block made with IntersectionObserver. And I dont know how correct remove observing after first animation.

My code:

((window, document) => {
   window.onload = () => {
      const missionBlock = document.getElementById('mission_block');
      const missionText = document.getElementById('mission_text');
      const missionImg = document.getElementById('mission_img');

      let observer = new IntersectionObserver(
         (entries) => {
            // Take the first entry
            const entry = entries[0];

            if (entry.isIntersecting) {
               missionImg.style.transform = "translateX(-70%)"
              missionImg.style.transition = "transform 1s ease-in-out"

               missionText.style.opacity = "0.5"
               missionText.style.transform = "translateX(235%)"
               missionText.style.transition = "opacity 1s ease-in-out"
               missionText.style.transition = "transform 1s ease-in-out"

            }
         },
         { threshold: 0.5 }
      );

      observer.observe(missionBlock);

   }
})(window, document, undefined)

score 5 · Accepted Answer · answered Dec 29 '21 at 16:43

Is it hepls?

The IntersectionObserver method unobserve() instructs the IntersectionObserver to stop observing the specified target element.

https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/unobserve

//...
if (entry.isIntersecting) {
    observer.unobserve(missionBlock);
//...

score 4 · Answer 2 · answered Dec 29 '21 at 16:45

4

You can disconnect the observer after the first intersection happens

if (entry.isIntersecting) {
  observer.disconnect()
  missionImg.style.transform = "translateX(-70%)"
  ...
}

answered Dec 29 '21 at 16:45

fgkolf

910
3
15

How to remove IntersectionObserver correct

2 Answers2