feat: transition on page change

jouwdan · May 4, 2024 · 641cdfd · 641cdfd
1 parent 986bd37
commit 641cdfd
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -8,6 +8,10 @@
 	import { Button } from '$lib/components/ui/button/index.js';
 	import { Avatar, AvatarFallback, AvatarImage } from '$lib/components/ui/avatar';
 	import { Github, Linkedin, Twitter } from 'lucide-svelte';
+
+	import { fly } from 'svelte/transition';
+	import { cubicIn, cubicOut } from 'svelte/easing';
+	export let data;
 </script>
 
 <header
@@ -46,7 +50,15 @@
 </header>
 
 <ModeWatcher />
-<slot />
+
+{#key data.pathname}
+	<div
+		in:fly={{ easing: cubicOut, y: 10, duration: 150, delay: 200 }}
+		out:fly={{ easing: cubicIn, y: 10, duration: 150 }}
+	>
+		<slot />
+	</div>
+{/key}
 
 <footer>
 	<div class="container py-8 text-center">

diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
@@ -1 +1,2 @@
 export const prerender = true;
+export const load = ({ url }) => ({ pathname: url.pathname });
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export const prerender = true;
		export const load = ({ url }) => ({ pathname: url.pathname });