Skip to content
Svelte Reveal

SvelteKit

Since Svelte actions were conceived to operate in a client-side environment, they don’t always work 100% in SvelteKit and SSR (server-side rendering) out of the box. Svelte Reveal is no exception, as it needs DOM access, and in order not to incur in weird animation behaviors some small setup is required by the end-users. Out of the following two methods, pick the one that most suit your project requirements.

Without SSR

Section titled “Without SSR”

If your page doesn’t need to be server-side rendered then the fix is very trivial. Turn off ssr in your +page.ts file as follows.

page.ts
export const ssr = false;

With SSR

Section titled “With SSR”

If your page does need to leverage server-side rendering, guard the reveal action behind a browser environment check. This prevents elements from flickering when the page is hydrated and the DOM becomes accessible to the library.

<script lang="ts">
  import { browser } from '$app/environment';
  import { reveal } from 'svelte-reveal';
</script>


{#if browser}
  <h1 use:reveal>Hello world</h1>
{/if}