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)
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);
//...
You can disconnect the observer after the first intersection happens
if (entry.isIntersecting) {
observer.disconnect()
missionImg.style.transform = "translateX(-70%)"
...
}