From 79422e065ea811521df13034d2240b40abdc39f4 Mon Sep 17 00:00:00 2001
From: Sangelo <contact@sangelo.space>
Date: Mon, 26 Jun 2023 10:38:57 +0200
Subject: [PATCH] Page Transitions!

---
 src/routes/+layout.js     |  7 +++++++
 src/routes/+layout.svelte | 14 +++++++++++---
 2 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 src/routes/+layout.js

diff --git a/src/routes/+layout.js b/src/routes/+layout.js
new file mode 100644
index 0000000..2fffad0
--- /dev/null
+++ b/src/routes/+layout.js
@@ -0,0 +1,7 @@
+export const load = ({ url }) => {
+  const { pathname } = url
+
+  return {
+    pathname
+  }
+}
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 53c75c9..d1f9f94 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,14 +1,22 @@
 <script>
   import "../app.scss";
   import Header from "./Header.svelte";
+
+  import { fly } from 'svelte/transition'
+  export let data
 </script>
 
 <div class="app">
   <Header />
 
-  <main>
-    <slot />
-  </main>
+  {#key data.pathname}
+    <main
+      in:fly={{ x: -10, duration: 250, delay: 250 }}
+      out:fly={{ x: 5, duration: 250 }}
+    >
+      <slot />
+    </main>
+  {/key}
 
   <footer>
     <p>