I am currently working on a website using Svelte and Sapper. I'm using Svelte transitions to animate some of the page elements. Whenever I change to a new page route, the transitions animate correctly. But when I load the page for the first time, they do not animate.
How does Svelte handle animations on page load? Do I need to use onMount() to get them to work properly?
Because Sapper server-renders pages, intro: true would result in an awkward flash of visible content becoming invisible then transitioning back in.
To avoid that, you need to prevent content being server-rendered in the first place. The easiest way to do that is indeed to use onMount:
<script>
import { onMount } from 'svelte';
let ready = false;
onMount(() => ready = true);
</script>
<div class="always-visible">
{#if ready}
<div class="visible-on-mount">...</div>
{/if}
</div>
