Page Transitions!

src/routes/+layout.js

@@ -0,0 +1,7 @@
+export const load = ({ url }) => {
+  const { pathname } = url
+
+  return {
+    pathname
+  }
+}

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>
+  {#key data.pathname}
-    <slot />
+    <main
-  </main>
+      in:fly={{ x: -10, duration: 250, delay: 250 }}
+      out:fly={{ x: 5, duration: 250 }}
+    >
+      <slot />
+    </main>
+  {/key}
 
   <footer>
     <p>