It is possible to make a slide overlay page transition in sveltekit with barbajs

I’m trying to make a simple slide transition in sveltekit when switching between routes.

The effect consist a overlay div, when route is changing, the overlay shows from bottom of the screen, it stays full screen for 1s, then moves up to reveal the next route.

A library for doing this is barba.js but so far i cannot implement it, when i import the lib i get document errors etc.

If anyone has done it before please share the simpliest solution.

>Solution :

Create a new Svelte component for your overlay. For example, you can name it "Overlay.svelte". In this component, define the overlay div with the desired styles and transition effects. For example:

<script>
  import { fade } from 'svelte/transition';

  export let isVisible;
</script>

<div class="overlay" transition:fade="{duration: 1000}">
  <!-- Your overlay content here -->
</div>

<style>
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: {isVisible ? 1 : 0};
    transform: translateY({isVisible ? 0 : '100%'});
    z-index: 999;
  }
</style>

In your SvelteKit layout or main component, import the fade transition from Svelte and create a variable to track the visibility of the overlay. For example:

<script>
  import { fade } from 'svelte/transition';
  import { afterUpdate } from 'svelte';

  let showOverlay = false;

  afterUpdate(() => {
    showOverlay = false; // Reset the overlay visibility after the transition completes
  });
</script>

<Overlay {isVisible={showOverlay}} />

<main transition:fade="{duration: 1000}" on:outrostart={() => showOverlay = true}">
  <!-- Your main content here -->
</main>

<style>
  main {
    position: relative;
    z-index: 1;
  }
</style>