Svelte transitions and animations on page load

Question

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?

Past

Answer 1

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>

Scripture

@FractalHQ created a nice component for this – Tally

I think now you can use the global modifier for transitions – Meister