Svelte page transition duplicating entire site __layout.svelte - html

Question

I'm new to Svelte and I'm trying to apply an animation to the content of my page when the user navigates to a new page. However the animation causes my entire website to duplicate during the animation.
My content looks like this:
<div class="entire-page">
<nav>
<ul>
<li> Navigation items </li>
<li> Navigation items </li>
<li> Navigation items </li>
</ul>
</nav>
<div class="content" in:slideIn out:slideOut>
Here is my first page content. This is supposed to slide in / out.
</div>
</div>
However, when the animation executes. it duplicates everything (i.e. .entire-page): This is the result in my browser until the animation is gone:
<div class="entire-page">
<nav>
<ul>
<li> Navigation items </li>
<li> Navigation items </li>
<li> Navigation items </li>
</ul>
</nav>
<div class="content" in:slideIn out:slideOut>
Here is my first page content. This is supposed to slide in / out.
</div>
</div>
<div class="entire-page">
<nav>
<ul>
<li> Navigation items </li>
<li> Navigation items </li>
<li> Navigation items </li>
</ul>
</nav>
<div class="content" in:slideIn out:slideOut>
Here is my second page content. This is supposed to slide in / out.
</div>
</div>
Is this due to some missing reference to elements?

Answer 1

Yes, this is to be expected.
(besides the mixup between animation and transition).
Your first page is leaving the DOM and the out:transition is triggered, this is nothing more than some fancy css that transform the element somehow, in your case some kind of slide animation. The DOM is still there until the end of this animation.
At the same time your new page is coming in, this triggers the in:transition, again just fancy css, but the DOM is there.
As you can see, logically during the in/out transition both entire pages will be present. (Almost) nothing you really can do about.
One thing you can do however is delay the in: animation with the duration of the out: one, that way the incoming page will wait for the outcoming page to have slided away. This of course only works if both pages have the same duration for the transition.
If you don't want the two pages to come one under the other, you have to wrap them in another div (that always is present) and start messing around with positioning in css. This could be used to for example have a page slide in from the right and out to the left, giving the impression that one is pushing the other out.

Answer 2

I had the same issue with some images i wanted to change reactively based on the page.url.pathname, my entire __layout.svelte got duplicated.
i solved it using the key directive:
<script lang="ts">
import { page } from '$app/stores';
import { fade } from 'svelte/transition';
import { colors } from '/stores';
const nav = [{ title: '/Dev', path: '/', imgUrl: '../images/dev', color: 'devBG', keyword: '/dev' }]
let keywordTitle: string;
let activeIndex: number = 0;
$: pageUrl = $page.url.pathname;
$: {
switch (pageUrl) {
case '/':
keywordTitle = nav[0].keyword;
colors.set(nav[0].color);
activeIndex = 0;
break;
}
</script>
{#each nav as cat, i}
{#key $page}
{#if activeIndex === i}
<img transition:fade src="{cat.imgUrl}-1800.jpg " />
{/if}
{/key}
{/each}
key destroys and recreate their contents when the value of an expression changes.
Docs for {#key}: https://svelte.dev/docs#key