Tengo una animación en la ventana de entrada en medio del bloque hecho con IntersectionObserver. Y no sé cómo eliminar correctamente la observación después de la primera animación.
Mi código:
((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)¿Es ayuda?
El método unobserve() de IntersectionObserver indica a IntersectionObserver que deje de observar el elemento de destino especificado.
https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/unobserve
//... if (entry.isIntersecting) { observer.unobserve(missionBlock); //...Puede desconectar el observador después de que ocurra la primera intersección.
if (entry.isIntersecting) { observer.disconnect() missionImg.style.transform = "translateX(-70%)" ... }