Smooth Page Transitions with SvelteKit

Say hi to my very first blog post, I hope you find it useful.

SvelteKit sites are fast, and static sites generated by SvelteKit are even faster. Navigating between pages is often instant. Adding a simple and short transition when changing pages not only looks nice, but it also helps the user realize that the page has changed, which they might otherwise miss, especially on text-heavy pages where one page might look very similar to another.

Creating smooth page transitions is very easy with core Svelte functionality. Here is how to do it:

Hand over the current path via the load function

When trying to get a smooth transition with “in” and “out” animations without any flickering or content suddenly appearing or disappearing you need to hand over the current path to your layout.svelte from the layout.js file.

/src/routes/+layout.js
1export async function load({ url }) {
2  return {
3    currentPath: url.pathname,
4  };
5};
export async function load({ url }) {
  return {
    currentPath: url.pathname,
  };
};

Use a transition directive with a key block

Now we just need to keep an eye on the current path and trigger the transition with the help of a key block. A key block the destruction and recreation of the wrapped content when the expression that we pass to it changes.

/src/routes/+layout.svelte
 1<script>
 2  import { fly } from "svelte/transition";
 3 
 4  export let data;
 5</script>
 6 
 7{#key data.currentPath}
 8  <div
 9    in:fly={ y: -30, duration: 200, delay: 150 }
10    out:fly={ y: -30, duration: 150 }
11  >
12    <slot />
13  </div>
14{/key}
<script>
  import { fly } from "svelte/transition";

  export let data;
</script>

{#key data.currentPath}
  <div
    in:fly={ y: -30, duration: 200, delay: 150 }
    out:fly={ : -30, duration: 150 }
  >
    <slot />
  </div>
{/key}

By wrapping the <slot /> with the div containing the transition directive we will cause everything within to be transitioned when the current URL changes. You might want to wrap even more parts of your layout to potentially transition your whole page.

(By the way: These are the values I currently use on this blog.)

Get to know Svelte core transitions and easing

There are 7 different transitions to choose from (6 when considering that draw is probably not that useful for this use case) and each of those can be customized by using one of 31 different easing functions. Including the other transition specific parameters there’s a lot to play with.

When using x and y values it’s important to know that they don’t represent the target values. They are the values you animate in from and out to.

Please consider that less is often more when it comes to animations on the web. And keep them short to not let SvelteKits speed go to waste and to not annoy the users.

Fine tuning and issue fixing

You can easily end up with animations that don’t seem smooth, are abrupt or even seem flickering. But at the speeds you usually want to use these you can’t pinpoint the issue.

I have two simple ways to find out what is actually happening. You might just increase the duration to a ridiculous amount like 5 seconds to see what is happening or, probably better, you can record your screen and scrub through the recording to really find out how everything is playing out exactly. My tip for MacOS is to use CleanShot X and make sure you increase the frames per second on your recording.

The two reasons why I ran into problems when creating page transitions are:

1. Not using the load function in layout.js to get the current path

If you only want to use in: for the new page and don’t need to transition out the old page, you don’t need to utilize a layout.js file. Instead you can just import { page } from '$app/stores' and put $page.url into the key block. It won’t work to transition out the current page because it will be gone before the path change is registered.

2. Not using a delay when using in and out transitions

Not having a delay on the in: part can lead to problems like a choppy animation. If you have issues try adding a delay to it, to let the out: animation play out first.

Syntax highlighting powered by Torchlight