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

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.

export const ssr = false;

With SSR

If your page does need to leverage server-side rendering, the setup remains easy but it requires a few more steps.

Import the bundled stylesheet in your page or layout

<script lang="ts">
  import "svelte-reveal/styles.css";
  ...
</script>

...

Add the sr__hide css class to every element targeted by Svelte Reveal with use:reveal. This will prevent the elements to flicker as soon as the page is hydrated and the DOM is accessible to the library.
page.svelte
```
<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal class="sr__hide">Hello world</h1>
```