diff options
| author | LynithDev <61880709+LynithDev@users.noreply.github.com> | 2023-12-28 13:06:11 +0100 |
|---|---|---|
| committer | LynithDev <61880709+LynithDev@users.noreply.github.com> | 2023-12-28 13:06:11 +0100 |
| commit | 98f4ee1dc2f505b0caa9c08b05935b78cc206007 (patch) | |
| tree | 3278d3efd2308044e9a4ef5113d11c98d2d99056 /apps/website/src/layouts | |
| parent | 092ad3a326145c17eb0a6967e284cc03d57c1851 (diff) | |
| download | Nexus-98f4ee1dc2f505b0caa9c08b05935b78cc206007.tar.gz Nexus-98f4ee1dc2f505b0caa9c08b05935b78cc206007.tar.bz2 Nexus-98f4ee1dc2f505b0caa9c08b05935b78cc206007.zip | |
Fine tuned view transition
Diffstat (limited to 'apps/website/src/layouts')
| -rw-r--r-- | apps/website/src/layouts/Layout.astro | 26 |
1 files changed, 23 insertions, 3 deletions
diff --git a/apps/website/src/layouts/Layout.astro b/apps/website/src/layouts/Layout.astro index d5b61cd..32cebed 100644 --- a/apps/website/src/layouts/Layout.astro +++ b/apps/website/src/layouts/Layout.astro @@ -16,6 +16,26 @@ const { description = 'Official website for Polyfrost.', favicon = Favicon, } = Astro.props; + +const fadeAnimation = { + old: { + name: 'fadeOut', + duration: '0.1s', + easing: 'linear', + fillMode: 'forwards', + }, + new: { + name: 'fadeIn', + duration: '0.1s', + easing: 'linear', + fillMode: 'backwards', + }, +}; + +const fade = { + forwards: fadeAnimation, + backwards: fadeAnimation, +}; --- <!doctype html> @@ -36,10 +56,10 @@ const { <ViewTransitions /> </head> - <body class="bg-gray-50 overflow-x-hidden"> - <Navbar/> + <body class="bg-gray-50 overflow-x-hidden" transition:animate={fade}> + <Navbar transition:animate="none" transition:persist /> - <main class="min-h-screen h-auto" transition:animate="fade"> + <main class="min-h-screen h-auto"> <slot/> </main> |