Different behavior if arrived directly on page

[kinglouie]

Describe the problem

I'm currently trying to play an intro animation when the index route is hit directly. This animation should not play when the user navigated to to the index route from another route. In classical websites i would have looked at the http referer and checked if its empty or has an external domain but in sveltekit inthe page store there is no such equivalent.

Describe the proposed solution

add a referer string to the page store which works like the http referer

Alternatives considered

I tried creating a custom store which derives from the page store but since I'm new to svelte and sveltekit I could not get that going really.

Importance

would make my life easier

Additional Information

No response

[johnwalshuk]

Hey, you could use afterNavigate here and if from is null then you can assume they've landed directly.

<script>
let animate = false;
afterNavigate(({from}) => !from && (animate = true));
</script>

[babichjacob]

I don't think this issue is titled for what you want.

Basically using the same idea as above, you can make a module for this to tell if you hit this page directly or if it was navigated to:

// src/lib/navigated.js
export let navigated = false;

export const setNavigated = () => { navigated = true };

You've ought to use setNavigated when navigation occurred, so it's probably easiest to do that in a layout. You might have to do it again in layout resets, but I'm not sure because I haven't tested that.

<!-- src/routes/__layout.svelte -->
<script>
    import { afterNavigate } from "$app/navigation";
    import { setNavigated } from "$lib/navigated";
    
    afterNavigate(setNavigated);
</script>

Because navigated is a live binding, its value can change after being imported.

<!-- src/routes/some-page.svelte -->
<script context="module">
    import { navigated } from "$lib/navigated";
    export const load = async (...) => { 
        // ... change load behavior based on `navigated`
    }
</script>

<!-- ... or do something different in the regular script block or markup -->

Related thread on Discord

[kinglouie]

Thank you guys both a lot, that was exactly what I needed 😊

[babichjacob]

Partially related thread on Discord

[jycouet]

Is it possible that Discord threads are not present anymore? Links are going to Discord rules. 🤔

I understand the idea of import { navigated } from "$lib/navigated"; but it's a bit manual & you have to add something in the __layout.svelte. (And it's working well)

---

Would be nice to have this directly like: import { clientNavigation } from "$app/navigation"; what do you think?

[babichjacob]

For organizational purposes: #4447 is a future issue that's still open about the same topic