23-01-2026

resources/js/app.js

@@ -3,11 +3,41 @@
 (function() {
     'use strict';
 
+    // Globaler Observer, der wiederverwendet wird
+    let globalObserver = null;
+
     // Warte bis DOM vollständig geladen ist
     if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initAnimations);
+        document.addEventListener('DOMContentLoaded', init);
     } else {
+        init();
+    }
+
+    function init() {
         initAnimations();
+
+        // Scroll Progress Indicator
+        initScrollProgress();
+
+        // Premium Sticky Header
+        initStickyHeader();
+
+        // Livewire Event Listener für dynamisch geladene Komponenten
+        document.addEventListener('livewire:navigated', function() {
+            initAnimations();
+        });
+
+        // Fallback für ältere Livewire-Versionen
+        document.addEventListener('livewire:load', function() {
+            initAnimations();
+        });
+
+        // Nach Livewire-Updates
+        window.addEventListener('livewire:update', function() {
+            setTimeout(() => {
+                initAnimations();
+            }, 100);
+        });
     }
 
     function initAnimations() {
@@ -17,56 +47,56 @@
             rootMargin: '0px 0px -80px 0px'
         };
 
-        // Erstelle Observer
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    // Füge is-visible Klasse mit kleinem Delay hinzu für sanfteren Effekt
-                    setTimeout(() => {
-                        entry.target.classList.add('is-visible');
-                    }, 50);
+        // Erstelle Observer wenn noch nicht vorhanden
+        if (!globalObserver) {
+            globalObserver = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        // Füge is-visible Klasse mit kleinem Delay hinzu für sanfteren Effekt
+                        setTimeout(() => {
+                            entry.target.classList.add('is-visible');
+                        }, 50);
 
-                    // Observer beenden nach Animation für bessere Performance
-                    observer.unobserve(entry.target);
-                }
-            });
-        }, observerOptions);
+                        // Observer beenden nach Animation für bessere Performance
+                        globalObserver.unobserve(entry.target);
+                    }
+                });
+            }, observerOptions);
+        }
 
-        // Finde alle Elemente mit Animation-Klassen
+        // Finde alle Elemente mit Animation-Klassen, die noch nicht beobachtet werden
         const animatedElements = document.querySelectorAll(
-            '.scroll-animate, .fade-in, .slide-up, .slide-right, .slide-left, .scale-in'
+            '.scroll-animate:not(.is-visible):not(.observed), .fade-in:not(.is-visible):not(.observed), .slide-up:not(.is-visible):not(.observed), .slide-right:not(.is-visible):not(.observed), .slide-left:not(.is-visible):not(.observed), .scale-in:not(.is-visible):not(.observed), .slide-down:not(.is-visible):not(.observed)'
         );
 
         // Beobachte jedes Element
         animatedElements.forEach(el => {
-            observer.observe(el);
+            el.classList.add('observed'); // Markiere als beobachtet
+            globalObserver.observe(el);
         });
 
-        // Smooth Scroll für Anchor-Links
-        document.addEventListener('click', function(e) {
-            const target = e.target.closest('a[href^="#"]');
-            if (target && target.hash) {
-                const targetElement = document.querySelector(target.hash);
+        // Smooth Scroll für Anchor-Links (nur einmal registrieren)
+        if (!window.smoothScrollInitialized) {
+            document.addEventListener('click', function(e) {
+                const target = e.target.closest('a[href^="#"]');
+                if (target && target.hash) {
+                    const targetElement = document.querySelector(target.hash);
 
-                if (targetElement) {
-                    e.preventDefault();
-                    const headerOffset = 80;
-                    const elementPosition = targetElement.getBoundingClientRect().top;
-                    const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
+                    if (targetElement) {
+                        e.preventDefault();
+                        const headerOffset = 80;
+                        const elementPosition = targetElement.getBoundingClientRect().top;
+                        const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
 
-                    window.scrollTo({
-                        top: offsetPosition,
-                        behavior: 'smooth'
-                    });
+                        window.scrollTo({
+                            top: offsetPosition,
+                            behavior: 'smooth'
+                        });
+                    }
                 }
-            }
-        });
-
-        // Scroll Progress Indicator
-        initScrollProgress();
-
-        // Premium Sticky Header
-        initStickyHeader();
+            });
+            window.smoothScrollInitialized = true;
+        }
     }
 
     function initStickyHeader() {