Svelte page transition duplicating entire site __layout.svelte

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

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