mykiwi/mykiwi.blog · 69a63a8

⑂ 69a63a8

Stop forcing the masthead signal sweep on boosted navigation

Restarting the full draw-in animation on every swap made the line
blink (hide then redraw) even when it was already visible. Drop that
JS entirely and rely solely on the existing transition: d rule in
style.scss, which already reshapes the line smoothly on navigation
without hiding it first.

Romain Gautier committed 2026-09-20T01:53:17+02:00 Browse files

69a63a8 parent: d35f746

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

@@ -114,22 +114,6 @@
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		- });
133	117	});
134	118	</script>
135	119	{{ 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 }}