How to run animation only on first page visit

Question

on the sveltekit website I'm currently building I want to play a simple intro animation on the index page if it is the entrypoint to the app. If a user used the navigation to load the index page the animation should not play.

So i'm looking for a simple way to detect if a page is the entrypoint from that session or not.

Here is an example page with such functionality reed.be/

Answer 1

You could use SvelteKit's afterNavigate to detect where the current navigation came from. Only animate if it's not coming from another page on the same domain. Here is what the index page could look like:

<script>
    import { afterNavigate } from '$app/navigation';
    import { fade } from 'svelte/transition';

    // hide by default
    let visible = false;

    let duration;

    afterNavigate(({ from }) => {
        // only animate if the navigation came from outside the page
        duration = from === null ? 600 : 0;
        // toggle visbility in any case
        visible = true;
    });
</script>

{#if visible}
    <h1 in:fade={{ duration }}>Welcome to SvelteKit</h1>
{/if}