Animationen außerhalb des Sichtbereichs pausieren, replaceState absichern

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Kjd7UMh3HKyVziCgiZ9A2i

assets/css/main.css

@@ -825,6 +825,8 @@ address { font-style: normal; }
 .h-duct-flow { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 6 10; --dash: -16; animation: dash 1.25s linear infinite; }
 .h-vent { fill: none; stroke: rgba(255, 255, 255, .72); stroke-width: 3; stroke-linecap: round; }
 
+.js .house__grid .house__svg * { animation-play-state: paused; }
+.js .house__grid.is-inview .house__svg * { animation-play-state: running; }
 .sys { transition: opacity .7s var(--ease); }
 .js .house__grid .sys { opacity: .26; }
 .js .house__grid .sys.is-on { opacity: 1; }

assets/js/house.js

@@ -115,7 +115,12 @@
       inView = entries[0].isIntersecting;
       if (inView) run();
     }, { threshold: 0.35 }).observe(root);
+    // SVG-Animationen (Strömungen, Lüfter) nur laufen lassen, solange das Haus sichtbar ist
+    new IntersectionObserver(function (entries) {
+      root.classList.toggle('is-inview', entries[0].isIntersecting);
+    }, { threshold: 0 }).observe(root);
   }
 
+  if (!('IntersectionObserver' in w)) root.classList.add('is-inview');
   activate(order[0], false);
 })(window, document);

assets/js/main.js

@@ -141,7 +141,7 @@
     var wasOpen = menuOpen;
     closeMenu();
     setTimeout(function () { scrollToEl(target); }, wasOpen ? 380 : 0);
-    if (history.replaceState) history.replaceState(null, '', id === '#top' ? location.pathname : id);
+    try { history.replaceState(null, '', id === '#top' ? location.pathname : id); } catch (err) { /* z. B. in Sandbox-Vorschauen */ }
   });
 
   /* ---------- Seitenwechsel mit Vorhang ---------- */
@@ -316,8 +316,9 @@
         { x: dir > 0 ? -unitWidth : 0, duration: unitWidth / 70, ease: 'none', repeat: -1 });
       tween.totalTime(tween.duration() * 500);
       var boost = { v: 1 };
-      ScrollTrigger.create({
+      var tapeST = ScrollTrigger.create({
         trigger: tape, start: 'top bottom', end: 'bottom top',
+        onToggle: function (self) { if (self.isActive) tween.resume(); else tween.pause(); },
         onUpdate: function (self) {
           var v = Math.min(Math.abs(self.getVelocity()) / 250, 7);
           var sign = self.direction === 1 ? 1 : -1;
@@ -331,6 +332,7 @@
           });
         }
       });
+      if (!tapeST.isActive) tween.pause();
       gsap.fromTo(tape, { xPercent: dir * -4 }, {
         xPercent: dir * 4, ease: 'none',
         scrollTrigger: { trigger: '.tapes', start: 'top bottom', end: 'bottom top', scrub: true }