Personal Website, vers. 1 (pushed far to late)

client/js/transitions.js

@@ -0,0 +1,17 @@
+// Cover image morphs into the project page (cross-document view transition)
+export function initCoverTransitions() {
+  const clear = () => {
+    for (const img of document.querySelectorAll('.card__img')) img.style.viewTransitionName = '';
+  };
+
+  document.addEventListener('click', (event) => {
+    const link = event.target.closest('[data-cover-link]');
+    if (!link || event.metaKey || event.ctrlKey || event.shiftKey) return;
+    clear();
+    const img = link.querySelector('.card__img');
+    if (img) img.style.viewTransitionName = 'project-cover';
+  });
+
+  // coming back via bfcache would otherwise leave the name on the old card
+  addEventListener('pageshow', clear);
+}