Spice Up Your Site With SvelteKit Page Transitions 

🔴 Patreon: www.patreon.com/joyofcode 💬 Discord: joyofcode.xyz/invite

Matia, your videos are most appreciated! Not only you are training me to be a svelte developer, but you are also having me to appreciate the work of a plumber and a flush repair master - how awesome indeed, all in one video! I love your amazing sense of humor.

THANKS! That `overflow: hidden` was driving me crazy

Really awesome! I had the hardest time with janky page transitions... you just solved it haha Love you content so much. Thanks!

Thanks a lot sir. Your video simplify the thing I struggle for many months.

Always the relevant info needed! Thankyou

This literally saved my booty today, thank you!

This is AWESOME. Was just wondering about this and also just found your channel yesterday!

that playFlush hahahahaha awesome!

this channel of yours is really fun

These cool and advance transition effects are great for game effects 😊😊😊

Lmao, I recently made a toilet related app where I use the flush sound as well. Nice vid 👍

Thank you very much. I think I will put all my transitions/animations in a separate js file and then import them in. Just for ease of use across an application.

Great content as always!

Playing Flush sound, Matia: How awesome is this😅. Anyway great tutorials

Awesome. One more time thanks my friend

awesome video!

This is really cool. Thanks.

Put the cursor on an identifier ( variable or function or an object property ) to rename something in vscode

you earned a sub

Great video!. Just wondering what would be the difference if you used directly the $page.url.pathname and added the duration and delay to the transition object

Thank you for this! I only have a problem when I click on a link, it jumps to the top of the page and then goes to the clicked page. Any idea how to fix this?

baš sam planirao dodati tranzicije na jednom projektu, možda jedino bez zvuka 😊

Hey Matia, thanks for the video. Any chance you could expand on that so that we can do page transition that are not on the whole block of content? Complex animations with stagger of elements, etc? That'd be much appreciate, thank you!!

Great video! Keep it coming! Also, i loved your -snippet - how did you set it up?

awesome any new video bro

i think there are a bug why the translation in the main page not working ? scenario enter to /login for example the navigate to / (main page animation will not work !

Great tutorial ! However, I can't get it to work with nested layouts (layout in a layout). The content instantly updates in the second layout :/ Any help appreciated !

Again, I have to ask, how are you able to have dark mode in the Svelte REPL? You don't know how badly I need this in my life.

Would this only work with client side rendered pages?

Makes a scroll bar appear and pushes my footer down because the new div appears right away even though it's at opacity 0 for the delay time. :/

GG

So no way of making a transition in which both pages are visible at the same time?

oh now. flush didn't work. something came back XD

Might be nice to show the demo first of what we are going to be doing…

my approach for page transition in PageTransition.svelte is using " import { navigating } from '$app/stores'; " instead of using " load({ url }) " in +layout.svelte and using that " navigating " as a store like this {#key $navigating} {#if !$navigating} {/if} {/key} it working good too and nothing you need to coding on +layout.svelte. BTW I don't is my method to approach a page transition have any downside or not.