diff --git a/assets/css/main.css b/assets/css/main.css index 615f7a7..1abf7d5 100644 --- a/assets/css/main.css +++ b/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; } diff --git a/assets/js/house.js b/assets/js/house.js index 6b84ff2..2ebf999 100644 --- a/assets/js/house.js +++ b/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); diff --git a/assets/js/main.js b/assets/js/main.js index b08d931..d3e4fbe 100644 --- a/assets/js/main.js +++ b/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 }