Page transitions between routes

[jimafisk]

From a conversation I had with @slanelb:

I was wondering if you had any content you could point me to or hints as to how one would create animations for page transitions with dynamic routing in Plenti?
SvelteKit seems to use $page.path and $layout.svelte to achieve this. See article: https://dev.to/giorgosk/smooth-page-transitions-in-layout-svelte-with-sveltekit-or-sapper-4mm1
I got an animation to work with static routing by wrapping the html elements within a page’s svelte file in a purposely built svelte component (created by me for the animation function). But of course there are no explicit svelte files for the json content files within eg. /pages/about or /pages/contact. There will be a transition when moving into any /pages/… page but no transition between pages within the /pages/… folder.
Any guidance would be appreciated. I can always make them static if necessary but I’d like to use the framework as design

I started playing around with in/out directives and noticed the same thing. You can easily do page transitions across content types (e.g. from the index to the about page, or from the about page to a blog post), but if you try to transition between two pages of the same content type (e.g. from the about page to the contact page) nothing happens. This appears to be caused by the way the component lifecycle is handled in dynamic components (e.g. <svelte:component this={route} />): sveltejs/kit#552 (comment). You can get around this by using a {#key} block on the content source:

<script>
  export let title, description, content;
  import { slide } from "svelte/transition";
</script>

{#key content}  
    <div in:slide={{ delay: 300 }} out:slide={{ delay: 300}}>
        <h1>{title}</h1>
        <p>{description}</p>
    </div>
{/key}

[slanelb]

Couldn't get it to work at first in pages.svelte but then put it into html.svelte. Works beautifully. And even simpler than before.

[jimafisk]

Awesome, glad it worked @slanelb!

Here's a video on dynamic route transitions in case it's helpful for anyone finding this later: https://youtu.be/OF2rpIAXTsE