I have an Intersection Observer working for an element on the page, however I want to now apply a completely different animation to another element on the page. I tried creating multiple observers, but it broke. I tried another stackOverflow post where I created an array and tried to use if statements, it broke. I'm still fairly new to JS and learning how to apply logic to different statements, and I'm just stuck not understanding why I can't target multiple elements?

    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)
// })

I'm sure this is something simple and I'm just not getting it. When I apply the artLoad.forEach... I get an error that artLoad isn't a function? Not sure why.