From 00a29dea38867d39ea8ea2c31cdf75eef13c632c Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 11 Jan 2024 01:05:09 -0800
Subject: feat(layout): page animations

---
 src/routes/+layout.server.ts |  4 ++--
 src/routes/+layout.svelte    | 35 +++++++++++++++++++++++++++++++++--
 2 files changed, 35 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index 9f05cf68..a32ab92a 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -1,5 +1,5 @@
-export const load = ({ locals }) => {
+export const load = ({ locals, url }) => {
 	const { user } = locals;
 
-	return { user };
+	return { user, url: url.pathname };
 };
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 87bcbabe..e1df9c9d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { env } from '$env/dynamic/public';
 	import { userIdentity as getUserIdentity } from '$lib/AniList/identity';
 	import { onMount } from 'svelte';
@@ -7,6 +7,9 @@
 	import { browser } from '$app/environment';
 	import HeadTitle from '$lib/HeadTitle.svelte';
 	import '../app.css';
+	import { fly } from 'svelte/transition';
+	import { readable, type Readable } from 'svelte/store';
+	import { navigating } from '$app/stores';
 
 	export let data;
 
@@ -15,6 +18,23 @@
 		id: -1,
 		avatar: 'https://s4.anilist.co/file/anilistcdn/user/avatar/large/default.png'
 	};
+	const navigationOrder = ['/', '/completed', '/schedule', '/updates', '/tools', '/settings'];
+	const previousPage: Readable<string | null> = readable(null, (set) => {
+		const unsubscribe = navigating.subscribe(($navigating) => {
+			if ($navigating && $navigating.from) set($navigating.from.url.pathname as unknown as null);
+		});
+
+		return () => unsubscribe();
+	});
+	const animationDelay = 100;
+
+	$: way = data.url.includes('/user')
+		? 200
+		: $previousPage && $previousPage.includes('/user')
+		? -200
+		: navigationOrder.indexOf(data.url) > navigationOrder.indexOf($previousPage ?? '/')
+		? 200
+		: -200;
 
 	onMount(async () => {
 		if (browser && localStorage.getItem('redirect')) {
@@ -79,7 +99,18 @@
 
 	<p />
 
-	<slot />
+	{#key data.url}
+		<div
+			in:fly={{
+				x: way,
+				duration: animationDelay,
+				delay: animationDelay
+			}}
+			out:fly={{ x: -way, duration: animationDelay }}
+		>
+			<slot />
+		</div>
+	{/key}
 </div>
 
 <style>
-- 
cgit v1.2.3