DeviceManager/src/routes/PageTransition.svelte

<script lang="ts">
  import { fly } from "svelte/transition";
  import { afterNavigate, beforeNavigate } from "$app/navigation";
  import { expoIn, expoOut } from "svelte/easing";

  let inDirection = 0;
  let outDirection = 0;
  let outroEnd: undefined | (() => void) = undefined;
  let animationDone: Promise<void>;

  let isNavigating = false;

  const routeOrder = [
    "/config/chords/",
    "/config/layout/",
    "/config/settings/",
  ];

  beforeNavigate((navigation) => {
    const from = navigation.from?.url.pathname;
    const to = navigation.to?.url.pathname;
    if (from === to) return;
    isNavigating = true;

    if (!(from && to && routeOrder.includes(from) && routeOrder.includes(to))) {
      inDirection = 0;
      outDirection = 0;
    } else {
      const fromIndex = routeOrder.indexOf(from);
      const toIndex = routeOrder.indexOf(to);

      inDirection = fromIndex > toIndex ? -1 : 1;
      outDirection = fromIndex > toIndex ? 1 : -1;
    }

    animationDone = new Promise((resolve) => {
      outroEnd = resolve;
    });
  });

  afterNavigate(async () => {
    await animationDone;
    isNavigating = false;
  });
</script>

{#if !isNavigating}
  <main
    in:fly={{ x: inDirection * 24, duration: 150, easing: expoOut }}
    out:fly={{ x: outDirection * 24, duration: 150, easing: expoIn }}
    on:outroend={outroEnd}
  >
    <slot />
  </main>
{/if}