Allow playing transitions on initial render

[geoffrich]

Describe the problem

In Svelte, you can play transitions on initial render by setting intro: true in the component constructor. There doesn't seem to be a way to do this in SvelteKit.

Describe the proposed solution

Add a setting in svelte.config.js that will set intro: true in the component constructor. This would only apply during the initial render. After client-side navigation, transitions should play automatically as components are mounted.

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

[Conduitry]

This has come up in Sapper (sveltejs/sapper#1106) and I don't think the question of what this would mean for SvelteKit is any clearer.

[nathancahill]

Also interested in using this. I think it makes sense to implement with a browser check since the transitions wouldn't need to play in SSR.

[mattcroat]

Yes, please! 😄

[divStar]

I am wondering if I am actually also running into this issue at the moment.

I have a page, which has a date as URL parameter. If I switch to another page (actually just navigating to a route with a different date), a new view is created and each cell (in a month view) is animated.

However: when firing up the page directly via URL, it shows the first a loading animation and then instead of playing transitions as expected (e.g. in:fade), it just draws everything in a finished state. When moving, the animation is performed as expected.

Is it perhaps this limitation?

[3mdistal]

It's the same problem, yes. This library provides a hacky workaround you can use for now: https://fractils.fractal-hq.com/#OnMount

[talwat]

It might also be a good idea to be able to enable this functionality per-component or per-page. I really need this feature in my own project and it would be very nice to have.

[gwerneckp]

It's the same problem, yes. This library provides a hacky workaround you can use for now: https://fractils.fractal-hq.com/#OnMount

This works, but it prevents SSR. I get similar results by:

{#if someVar}
    <Component transition:someAnimation/>
{if}

[jrhager84]

What's the status of this?

[ioucyf]

is it possible to revert back to svelte 3 until this is resolved? or is it going to break more things by doing so?

I'm on a completely empty sveltekit skeleton project. I'm starting fresh, but it comes with svelte 4.

[socketopp]

What's the status on this feature?

[DaveKeehl]

Any update? 👀

[Spimy]

There's still no way to do this after 3 years since this issue was opened? 😖