Demo: https://amazing-kirch-8cb3f5.netlify.app/
I have tried before and failed to make my page transtitions implemented in a way that we don't hav...
For further actions, you may consider blocking this person and/or reporting abuse
I've created a REPL which shows how to use a crossfade between pages. svelte.dev/repl/0ad58a0d830f4001b9...
Hint: Use the same instance of the crossfade by creating the send and receive in a separate javascript file.
This was exactly the demo I needed, and it easily works to move around multiple UI elements at the same time. So cool!
svelte.dev/repl/b2a5fbb5ec86486bb7...
I'm not sure in which version it happened... but the
segmentprop no longer appears to be valid. I've yet to find what the appropriate replacement is.@skwasha I have updated the repo and replaced
segmentwith$page.pathand updated also the tutorial to reflect this change. Let me know if this works for you.Hi @giorgosk, Great tutorial although my page fades are not ideal.
P.S:
$page.pathseems to have changed to$page.route.id?Hey, that's great! Thanks for the update. Where did you happen to find the location for the page stores? I tried searching and checking old messages on the Discord but never saw any mention of it. Do you know if that's going to be where these "built in" stores will be located moving forward with Svelte Kit?
thanks again.
@skwasha I started digging in the sveltekit
node_modules/sveltejs/kit/assets/runtime/app/stores.jscode looking for$page.pathmentioned in the github.com/sveltejs/sapper/issues/824 and found it. Perhaps the importimport { page } from '@sveltejs/kit/assets/runtime/app/stores.js';will get more elegant when sveltekit gets released (or I might be missing the correct way to do it) but this will be the way to use it again according to the issue/824.I searched the discord and found the right way to do it:
import { page } from '$app/stores';Thanks for this article, by the way, it's helping me get off the ground with svelte/kit.
Another idea for a change, you can set the
class="current"like this, it's a bit shorter:<a href="/" class:current={segment==="/"}>Home</a><a href="/about" class:current={segment==="/about"}>About</a>
Yes there is some talks about removing segment from sapper but nothing has been committed yet. In here github.com/sveltejs/sapper/issues/824 you can find the discussion and some alternatives (using $page store)
Yes. I saw that discussion as well. I guess my point was that the above code is no longer functional (at least the bits that rely on
segment). Somewhere along the way that proposed change seems to have made it into the current sveletkit branch.Does anyone know where the
pagestore is in the Sveltekit world? Previously, it was in@sapper/app.import { page } from '$app/stores';Great. But currently in sveltekit, you can just use $page.url.pathname to get the current page's path for the key in the PageTransition component. So there should no be any need to export the
refrechprop.it's now
$page.route.idGood read!
I think it would have been much better with short video clips of how the transitions are working with the changes.
Sorry I don't understand why would you need a video when there is a live site demo amazing-kirch-8cb3f5.netlify.app/ ?
No, I meant the difference in the transitions before and after making changes for improvement.
Ok I see perhaps I can do it when I get a chance. In the meantime if you need to see the improvements you can toggle the last css changes on and off on your locally installed repo.
Have you ever tried this approach using a fixed navigation? In all of the demos I've seen, when you click on a link, the site jumps you to the top of the page before transitioning the page out. Do you know why this happens, and how to prevent it?
Late reply, but I don't think it has anything to do with a fixed nav. I think it's just invoking a transition from a scroll position other than the top of the page. At least I think I eliminated all of the variables and it was still happening. My guess is that the transition code in Svelte simply wasn't intended for content the size of a whole page and does something to trigger the browser to jump. Couldn't find it in their code, but I didn't look too hard. Anyway, the only solution I found was simply to remove the out: transition altogether. Just do an in:fade. Looks okay. Better than the "cut" default.
@giorgosk did you manage to figure out how to handle routing from code ? in sapper for example you have the "goto" method for routing. i couldn't find this feature in sveltekit
Sorry not done any further research on it
If I try to use PageTransition in the layout instead of the component I get the following error, do you know why?
Error: failed to load module for ssr: /Users/userName/Documents/GitRepos/project/src/lib/components/PageTransitions.svelt
Thanks a lot for your great tutorial. In my project I am using Svelte + GSAP and I would also like to use page transitions. I implemented your code, but GSAP animations don't work then. Would you have any advice on how to fix it?
Here is a demo:
Without Page Transitions:
stackblitz.com/edit/sveltejs-gsap-...
With Page Transitions:
stackblitz.com/edit/sveltejs-gsap-...
I would appreciate any help. Thank you!
dang, this is what i need,,
cool post,, thanks for the idea,,
Great article Giorgos!! Congrats.
Glad you liked it Pavlos, comments are always appreciated !!!
@giorgosk is this possible to do with normal svelte (not kit)? If yes, could give me a tip on how to do it?
if you have routes just use my <!-- src/routes/$layout.svelte --> if not I do not know how it can be done