dab/avtoambor
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add diagonal view-transition wipe between pages

Browse Source 
Hooks SvelteKit's onNavigate into the View Transitions API and styles the
old/new root pseudos with a scaled fade-out and a clip-path diagonal reveal
trimmed by a green drop-shadow accent. Honors prefers-reduced-motion.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
David Beccue
2026-05-16 07:49:33 +05:00
parent 8817b5bc07
commit def8f1d78f
2 changed files with 45 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/routes/+layout.svelte
View File

@ -1,5 +1,16 @@
<script>
import { onNavigate } from '$app/navigation';
import Header from '$lib/components/Header.svelte';
onNavigate((navigation) => {
if (!document.startViewTransition) return;
return new Promise((resolve) => {
document.startViewTransition(async () => {
resolve();
await navigation.complete;
});
});
});
</script>
<Header />
@ -105,4 +116,31 @@
margin: 0 auto;
padding: 1.5rem 1.25rem 3rem;
}
@keyframes -global-va-fade-out {
from { opacity: 1; transform: scale(1); filter: blur(0); }
to { opacity: 0; transform: scale(0.97); filter: blur(2px); }
}
@keyframes -global-va-wipe-in {
from { clip-path: polygon(0% 0%, 0% 0%, 0% 0%); }
to { clip-path: polygon(0% 0%, 220% 0%, 0% 220%); }
}
:global(::view-transition-old(root)) {
animation: va-fade-out 500ms cubic-bezier(0.4, 0, 1, 1) both;
transform-origin: 50% 40%;
}
:global(::view-transition-new(root)) {
animation: va-wipe-in 700ms cubic-bezier(0.76, 0, 0.24, 1) both;
filter:
drop-shadow(2px 2px 0 #006a4e)
drop-shadow(10px 8px 26px rgba(0, 106, 78, 0.22));
}
@media (prefers-reduced-motion: reduce) {
:global(::view-transition-old(root)),
:global(::view-transition-new(root)) {
animation: none;
filter: none;
clip-path: none;
}
}
</style>