Astro component script only run once

Question

I have an Astro component with a script for control scroll animations. The problem is the following. When the index is loaded, the script is executed and the animation is activated without problem. But when I change the page and return to the index the code no longer runs again. Any idea how I could fix it?

   const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
         if (entry.isIntersecting) {
            entry.target.classList.add("move");
         }
      });
   });

   const icons = document.querySelectorAll(".service-icon");
   icons.forEach((icon) => observer.observe(icon));

Answer 1

(For clarity) you can use lifecycle events when using View Transitions - this is because you need to re-run any scripts/code after navigating to another page.