Morph Page Three

1
...
2
<script>
3
  import {supportsViewTransitions} from 'astro:transitions/client';
4

5
  let viewTransitionName: string;
6
  document.addEventListener('astro:before-preparation', (event) => {
7
    if (supportsViewTransitions) {
8
      const originalLoader = event.loader;
9
      event.loader = async () => {
10
        await originalLoader();
11
        if (event.navigationType !== 'traverse') {
12
          viewTransitionName = getComputedStyle(event.sourceElement!).viewTransitionName;
13
          event.newDocument.querySelector('h1')!.style.viewTransitionName = viewTransitionName;
14
          history.replaceState({ ...history.state, viewTransitionName }, '');
15
        } else {
16
          if (event.direction === 'back') {
17
            viewTransitionName = history.state.viewTransitionName;
18
            document.querySelector('h1')!.style.viewTransitionName = viewTransitionName;
19
          } else {
20
            event.newDocument.querySelector('h1')!.style.viewTransitionName = viewTransitionName;
21
            viewTransitionName = history.state.viewTransitionName;
22
          }
23
        }
24
      };
25
    }
26
  });
27
</script>