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.
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.
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!!
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?
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 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
The store gets updated late which causes an overlap. You could use `$navigating` instead but if you're on a slower connection it's going to cause the page transition to play again before the page loads.
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 !
@@JoyofCodeDev let's say flyin a new page while the previous page is still flyingout. Or like you'd rotate a cube so that both sides are visible until the end of rotation.
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.
🔴 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.
I'm glad Rich Harris devoted his life to Svelte to culminate in toilet humor.
Really awesome! I had the hardest time with janky page transitions... you just solved it haha
Love you content so much. Thanks!
You're welcome! 😄
Thanks a lot sir. Your video simplify the thing I struggle for many months.
Lmao, I recently made a toilet related app where I use the flush sound as well. Nice vid 👍
Great minds think alike.
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.
This is AWESOME. Was just wondering about this and also just found your channel yesterday!
that playFlush hahahahaha awesome!
This literally saved my booty today, thank you!
Always the relevant info needed! Thankyou
These cool and advance transition effects are great for game effects 😊😊😊
Yeah! 😄
Playing Flush sound, Matia: How awesome is this😅. Anyway great tutorials
this channel of yours is really fun
Thank you! 😄
Put the cursor on an identifier ( variable or function or an object property ) to rename something in vscode
Awesome. One more time thanks my friend
Great content as always!
awesome video!
Thank you! 😄
Great video! Keep it coming! Also, i loved your -snippet - how did you set it up?
You can use Easy Snippet in VS Code to make creating snippets easier.
awesome any new video bro
This is really cool. Thanks.
You're welcome! 😄
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!!
I have an entire course on animating Svelte: ua-cam.com/video/3RlBfUQCiAQ/v-deo.html.
Thank you!!!!
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?
That's weird. If you want make a reproduction and ask your question on Discord.
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 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
The store gets updated late which causes an overlap. You could use `$navigating` instead but if you're on a slower connection it's going to cause the page transition to play again before the page loads.
baš sam planirao dodati tranzicije na jednom projektu, možda jedino bez zvuka 😊
propuštaš 😂
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. :/
You can use CSS Grid to stack the elements on top of each other.
you earned a sub
Thanks! 😄
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 !
If you need help make a reproduction and you can get help on the Discord.
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.
I already replied but I use darkreader.org/.
Would this only work with client side rendered pages?
I would think so because transitions are just Svelte actions which don't run on the server.
@@JoyofCodeDev I see. Thanks:)
GG
So no way of making a transition in which both pages are visible at the same time?
What are you trying to do?
@@JoyofCodeDev let's say flyin a new page while the previous page is still flyingout. Or like you'd rotate a cube so that both sides are visible until the end of rotation.
@@maziasty I mean if you look at the transition they are on the page at the same time if you don't use a delay.
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…
Did you read the title? 😆
@@JoyofCodeDev yes. I mean a good tutorial would start with a visual demo of how the final thing works. Then start the coding etc.
@@morespinach9832 I'm going to keep that in mind.
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.
I always find weird issues when using a store for page transitions but if it works for you I don't see why not.