improve menu animations

rt-evil-inc · Sep 29, 2024 · 8af2d08 · 8af2d08
1 parent 4986d5c
commit 8af2d08
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/lib/components/MenuPage.svelte b/src/lib/components/MenuPage.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { safeInsets } from '$lib/state';
-	import { fade } from 'svelte/transition';
+	import { fly } from 'svelte/transition';
 </script>
 
-<div transition:fade={{ duration: 150 }} class="bg-background col-start-1 col-end-2 row-start-1 row-end-2 z-40">
+<div transition:fly={{ duration: 150, x: 100 }} class="bg-background col-start-1 col-end-2 row-start-1 row-end-2 z-40">
 	<div class="flex flex-col h-screen" style:padding-top={Math.max($safeInsets.top, 16) + 42 + 'px'}>
 		<div class="flex flex-col h-full overflow-y-auto">
 			<div class="fixed left-0 right-0 h-4 -mt-4" style:box-shadow="0px 6px 6px 0px var(--color-background)" />

diff --git a/src/lib/components/Profile.svelte b/src/lib/components/Profile.svelte
@@ -8,7 +8,7 @@
 	import IconLogout2 from '@tabler/icons-svelte/icons/logout-2';
 	import IconMessageReport from '@tabler/icons-svelte/icons/message-report';
 	import { createEventDispatcher, onMount } from 'svelte';
-	import { fade } from 'svelte/transition';
+	import { fade, fly } from 'svelte/transition';
 	import { accountInfo, safeInsets, user } from '$lib/state';
 	import { logOut } from '$lib/state/helper';
 	import SettingsEntry from './SettingsEntry.svelte';
@@ -40,7 +40,7 @@
 
 </script>
 
-<div transition:fade={{ duration: 150 }} class="absolute w-full h-full inset-0 bg-background z-30 grid" >
+<div transition:fly={{ duration: 150, x: 100 }} class="absolute w-full h-full inset-0 bg-background z-30 grid" >
 	{#if $user}
 		<div class="flex flex-col justify-between items-center h-full gap-10 col-start-1 col-end-2 row-start-1 row-end-2 p-4 overflow-x-hidden"
 			style:padding-top="{Math.max($safeInsets.top, 16)}px" style:padding-bottom="{Math.max($safeInsets.bottom, 24)}px"