Tengo un Intersection Observer trabajando para un elemento de la página, sin embargo, ahora quiero aplicar una animación completamente diferente a otro elemento de la página. Intenté crear múltiples observadores, pero se rompió. Probé otra publicación de stackOverflow donde creé una matriz e intenté usar declaraciones if, se rompió. Todavía soy bastante nuevo en JS y estoy aprendiendo cómo aplicar la lógica a diferentes declaraciones, y simplemente no entiendo por qué no puedo apuntar a múltiples elementos.

 const backgroundTitles = document.querySelectorAll('.section-title span') const artLoad = document.querySelector('.artwork') const items = [backgroundTitles, artLoad] const observer = new IntersectionObserver(entries => { entries.forEach(entry => { entry.target.classList.toggle('bgtitle', entry.isIntersecting) }) console.log(entries) }) const newObserver = new IntersectionObserver(entries2 => { entries2.forEach(entry => { entry.target.classList.toggle('openAnimation', entry.isIntersecting) }) }) backgroundTitles.forEach(title => { observer.observe(title) }) // artLoad.forEach(art => { // newObserver.observe(art) // })

Estoy seguro de que esto es algo simple y simplemente no lo entiendo. Cuando aplico artLoad.forEach... aparece un error que indica que artLoad no es una función. No estoy seguro de por qué.