src/routes/+layout.svelte

@@ -3,6 +3,9 @@
 	import { page } from '$app/stores';
 	import Footer from "./Footer.svelte";
 	import Navbar from "./Navbar.svelte";
+	import PageTransition from "./PageTransition.svelte";
+
+	export let data : { url: string };
 </script>
 
 <!-- Homepage has its own navbar with animations -->
@@ -12,13 +15,18 @@
 			<Navbar />
 			<slot name="header" />
 		</div>
-		<div id="content">
-			<slot />
+		<main>
+			<PageTransition url={data.url}>
+				<slot />
+			</PageTransition>
 			<Footer />
-		</div>
+		</main>
 	</div>
 {:else}
-	<slot />
+	<!-- On the home page -->
+	<PageTransition url={data.url}>
+		<slot />
+	</PageTransition>
 	<Footer />
 {/if}
 
@@ -97,7 +105,7 @@
 			gap: 20px;
 		}
 	}
-	#content {
+	main {
 		width: min(100vw, max(50vw, 100vh));
 		grid-area: content;
 	}

src/routes/+layout.ts

@@ -2,3 +2,9 @@ export const prerender = true;
 
 // Prevent page 404 on refresh
 export const trailingSlash = 'always';
+
+export async function load({ url }) {
+	return {
+		url: url.pathname
+	}
+}

src/routes/PageTransition.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition'
+
+	export let url: string
+</script>
+
+{#key url}
+	<div class="transition" in:fade>
+		<slot />
+	</div>
+{/key}
+
+<style>
+	.transition {
+		height: 100%;
+	}
+</style>