mykiwi/mykiwi.blog · d35f746

⑂ d35f746

Replay masthead signal sweep on boosted navigation

innerMorph reuses the signal path's DOM node across htmx-boosted
navigation, only morphing its d attribute, so the signal-sweep
draw-in CSS animation never restarts on client-side nav - only on a
full page load. Force it to replay after every swap.

Romain Gautier committed 2026-09-20T01:28:01+02:00 Browse files

d35f746 parent: 1365852

modified blog/layouts/_default/baseof.html +16 -0 Viewed

@@ -114,6 +114,22 @@
114	114	request: {headers: {}, signal: restoreAbort.signal},
115	115	});
116	116	});
	117	+
	118	+ // innerMorph patches the masthead signal's <path> in place across a
	119	+ // boosted navigation rather than replacing it, so its `d` attribute
	120	+ // just morphs (see .masthead__signal path's `transition: d` in
	121	+ // style.scss) and the signal-sweep draw-in animation - which, being
	122	+ // a CSS animation on an element that never left the DOM, has no
	123	+ // "start" to trigger - never replays. Restart it by hand on every
	124	+ // swap so the line draws itself in on every navigation, not only a
	125	+ // full page load.
	126	+ document.body.addEventListener("htmx:after:swap", () => {
	127	+ const path = document.querySelector(".masthead__signal path");
	128	+ if (!path) return;
	129	+ path.style.animation = "none";
	130	+ path.getBoundingClientRect();
	131	+ path.style.animation = "";
	132	+ });
117	133	});
118	134	</script>
119	135	{{ block "head" . }}{{ end }}

              request: {headers: {}, signal: restoreAbort.signal},
            });
          });
++
++        // innerMorph patches the masthead signal's <path> in place across a
++        // boosted navigation rather than replacing it, so its `d` attribute
++        // just morphs (see .masthead__signal path's `transition: d` in
++        // style.scss) and the signal-sweep draw-in animation - which, being
++        // a CSS animation on an element that never left the DOM, has no
++        // "start" to trigger - never replays. Restart it by hand on every
++        // swap so the line draws itself in on every navigation, not only a
++        // full page load.
++        document.body.addEventListener("htmx:after:swap", () => {
++          const path = document.querySelector(".masthead__signal path");
++          if (!path) return;
++          path.style.animation = "none";
++          path.getBoundingClientRect();
++          path.style.animation = "";
++        });
        });
      </script>
      {{ block "head" . }}{{ end }}