Fix animation stagger delay on SPA navigation

On View Transitions navigation, elements in the viewport now appear
instantly instead of getting staggered delays that caused the hero
image to show before text. Below-the-fold elements still animate
with stagger on scroll. Also disconnects old IntersectionObserver
before creating a new one to prevent memory leaks.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: 2 people

src/components/common/BasicScripts.astro

@@ -172,8 +172,14 @@ import { UI } from 'astrowind:config';
     animationCounter: 0,
     elements: null,
 
-    start() {
-      const selectors = [
+    start(isNavigation) {
+      if (this.observer) {
+        this.observer.disconnect();
+      }
+
+      this.animationCounter = 0;
+
+      var selectors = [
         '[class*=" intersect:"]',
         '[class*=":intersect:"]',
         '[class^="intersect:"]',
@@ -185,30 +191,43 @@ import { UI } from 'astrowind:config';
 
       this.elements = Array.from(document.querySelectorAll(selectors.join(',')));
 
-      const getThreshold = (element) => {
+      var getThreshold = function (element) {
         if (element.classList.contains('intersect-full')) return 0.99;
         if (element.classList.contains('intersect-half')) return 0.5;
         if (element.classList.contains('intersect-quarter')) return 0.25;
         return 0;
       };
 
-      this.elements.forEach((el) => {
+      this.elements.forEach(function (el) {
         el.setAttribute('no-intersect', '');
         el._intersectionThreshold = getThreshold(el);
       });
 
-      const callback = (entries) => {
-        entries.forEach((entry) => {
-          requestAnimationFrame(() => {
-            const target = entry.target;
-            const intersectionRatio = entry.intersectionRatio;
-            const threshold = target._intersectionThreshold;
+      if (isNavigation) {
+        var vh = window.innerHeight;
+        this.elements.forEach(function (el) {
+          var rect = el.getBoundingClientRect();
+          if (rect.top < vh && rect.bottom > 0) {
+            el.removeAttribute('no-intersect');
+            el.setAttribute('data-animated', 'true');
+            el.style.animationDuration = '0s';
+          }
+        });
+      }
+
+      var self = this;
+      var callback = function (entries) {
+        entries.forEach(function (entry) {
+          requestAnimationFrame(function () {
+            var target = entry.target;
+            var intersectionRatio = entry.intersectionRatio;
+            var threshold = target._intersectionThreshold;
 
             if (target.classList.contains('intersect-no-queue')) {
               if (entry.isIntersecting) {
                 target.removeAttribute('no-intersect');
                 if (target.classList.contains('intersect-once')) {
-                  this.observer.unobserve(target);
+                  self.observer.unobserve(target);
                 }
               } else {
                 target.setAttribute('no-intersect', '');
@@ -220,44 +239,48 @@ import { UI } from 'astrowind:config';
               if (!target.hasAttribute('data-animated')) {
                 target.removeAttribute('no-intersect');
                 target.setAttribute('data-animated', 'true');
+                target.style.animationDuration = '';
 
-                const delay = this.animationCounter * this.delayBetweenAnimations;
-                this.animationCounter++;
+                var delay = self.animationCounter * self.delayBetweenAnimations;
+                self.animationCounter++;
 
-                target.style.transitionDelay = `${delay}ms`;
-                target.style.animationDelay = `${delay}ms`;
+                target.style.transitionDelay = delay + 'ms';
+                target.style.animationDelay = delay + 'ms';
 
                 if (target.classList.contains('intersect-once')) {
-                  this.observer.unobserve(target);
+                  self.observer.unobserve(target);
                 }
               }
             } else {
               target.setAttribute('no-intersect', '');
               target.removeAttribute('data-animated');
               target.style.transitionDelay = '';
               target.style.animationDelay = '';
+              target.style.animationDuration = '';
 
-              this.animationCounter = 0;
+              self.animationCounter = 0;
             }
           });
         });
       };
 
-      this.observer = new IntersectionObserver(callback.bind(this), { threshold: [0, 0.25, 0.5, 0.99] });
+      this.observer = new IntersectionObserver(callback, { threshold: [0, 0.25, 0.5, 0.99] });
 
-      this.elements.forEach((el) => {
-        this.observer.observe(el);
+      this.elements.forEach(function (el) {
+        if (!el.hasAttribute('data-animated')) {
+          self.observer.observe(el);
+        }
       });
     },
 
-    /* 
+    /*
       REF: #643;
       We need to remove the delay to fix flickering/delay
       when toggling the theme. Observer only removes them
       after data-animated is gone (out of view).
     */
     removeAnimationDelay() {
-      this.elements.forEach((el) => {
+      this.elements.forEach(function (el) {
         if (el.getAttribute('data-animated') === 'true') {
           el.style.transitionDelay = '';
           el.style.animationDelay = '';
@@ -266,9 +289,9 @@ import { UI } from 'astrowind:config';
     },
   };
 
-  Observer.start();
+  Observer.start(false);
 
-  document.addEventListener('astro:after-swap', () => {
-    Observer.start();
+  document.addEventListener('astro:after-swap', function () {
+    Observer.start(true);
   });
 </script>