how to add Page Transition in Sveltekit

AnimationSvelte

8/18/2022, 7:34:57 PM

by Leo Voon

First get the url pathname from layout load.

// +layout.js or +layout.server.js

export function load({url}) {
 return {
   url: url.pathname,
 }
}

then wrap the slot with keyed div or semantic element to be transitioned. Use the url returned from layout load as key.

// +layout.svelte
<script>
import { fly } from 'svelte/transition'
export let data;
let transitionDuration = 500
</script>


{#key data.url}
<div in:fly={{x: 20, duration: transitionDuration, delay: transitionDuration }} 
     out:fly={{ x: 20, duration: transitionDuration }}
  <slot>
</div>
{/key}

Make the delay same as transition duration for smooothness.