Почему при добавлении класса CSS к другому диву анимация перестаёт работать

При добавлении класса анимации к другому анимация полностью перестаёт работать, изначально прописывал вот так

JS

observer.observe(document.querySelector(".contact"));

Но так как мне нужно что бы анимация могла распространятся и на другие элементы пришлось немного изменить код, ниже прикрепляю код так как он выглядит сейчас, сам сайт пишу на Vue.JS 3

JS

document.addEventListener("DOMContentLoaded", function(){
  const observer = new IntersectionObserver((entries) => {
    // перебор записей
    entries.forEach((entry) => {
      // если элемент появился
      if (entry.isIntersecting) {
        // добавить ему CSS-класс
        entry.target.classList.add("loud");
      }
      else {
        entry.target.classList.remove("loud")
      }
    });
  });
  observer.observe(document.querySelectorAll(".contact"));


});

HTML

 <div class="principal">
    <div class="spacer">
      <div class="text_align">
        <img src="../assets/bodyactive1.png" class="body_active_img" alt="" />
      </div>
    </div>
    <div class="first_block">
      <img src="../assets/about.png" class="about_text" alt="" />
      <div class="text">
        <div></div>
        <h1 class="title contact">SCARICA SUBITO L'APP DI BODY ACTIVE</h1>
        <p></p>
        <p class="subtitle">
          Vorresti ricevere qualche consiglio dal tuo Personal Trainer? Oppure
          allenarti fuori da casa? Grazie alla app di Body Active puoi godere di
          moltissimi vantaggi:
        </p>
        <div>
          <ul>
            <li class="list">Consultare l‘Area Self (profilo, chat, ecc)</li>
            <li class="list">Consultare le statistiche dei tuoi allenamenti</li>
            <li class="list">Vedere i corsi disponibili in LIVE</li>
            <li class="list">Vedere tutte gli allenamenti</li>
            <p class="list">
              Scarica la nostra APP <a href="">IOS</a> e <a href="">Android</a>
            </p>
          </ul>
          <button class="button button_under_list buttonyellow">
            Scarica subito l'app
          </button>
        </div>
      </div>
      <div class="bg_1">
        <img src="../assets/4.jpg" class="img_bg_1" alt="" />
      </div>
    </div>
    <div class="second_block">
      <img src="../assets/about.png" class="about_text_2" alt="" />
      <div class="text_2">
        <h1 class="title contact">SCOPRI I NOSTRI CORSI</h1>
        <p></p>
        <ul>
          <li class="list_2">
            Potrai scegliere tra corsi di diverso tipo tenuti dal nostro staf
          </li>
          <li class="list_2">
            Fatti motivare dai nostri trainer a dare il massimo
          </li>
          <li class="list_2">Tutti i corsi sono compresi nell'abbonamento</li>
        </ul>
        <button class="button button_under_list buttonyellow">
          Scopri di piu'
        </button>
      </div>

CSS

.principal .title {
  color: black;
  font-size: 40px;
  font-family: "Montserrat 900", sans-serif;
  font-weight: 900;
  transform: translate(0px, 120%);
  opacity: 0%;
  transition: all 0.8s ease 0s;
}

.principal .title.loud {
  transform: translate(0px, 0px);
  opacity: 1;
}