🔴 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.

@JoyofCodeDev

Жыл бұрын

I'm glad Rich Harris devoted his life to Svelte to culminate in toilet humor.

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

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

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

@JoyofCodeDev

Жыл бұрын

You're welcome! 😄

Always the relevant info needed! Thankyou

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 literally saved my booty today, thank you!

Great content as always!

Awesome. One more time thanks my friend

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

@JoyofCodeDev

Жыл бұрын

Yeah! 😄

that playFlush hahahahaha awesome!

this channel of yours is really fun

@JoyofCodeDev

Жыл бұрын

Thank you! 😄

awesome video!

@JoyofCodeDev

Жыл бұрын

Thank you! 😄

This is really cool. Thanks.

@JoyofCodeDev

Жыл бұрын

You're welcome! 😄

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

@JoyofCodeDev

Жыл бұрын

Great minds think alike.

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

awesome any new video bro

you earned a sub

@JoyofCodeDev

Жыл бұрын

Thanks! 😄

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

@JoyofCodeDev

Жыл бұрын

You can use Easy Snippet in VS Code to make creating snippets easier.

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

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

@JoyofCodeDev

Жыл бұрын

propuštaš 😂

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

@JoyofCodeDev

Жыл бұрын

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.

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!!

@JoyofCodeDev

Жыл бұрын

I have an entire course on animating Svelte: kzread.info/dash/bejne/ZYagpMiOgabPcbQ.html.

@marlonmarcello

Жыл бұрын

Thank you!!!!

GG

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

Жыл бұрын

If you need help make a reproduction and you can get help on the Discord.

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?

@JoyofCodeDev

11 ай бұрын

That's weird. If you want make a reproduction and ask your question on 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.

@JoyofCodeDev

Жыл бұрын

I already replied but I use darkreader.org/.

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 !

Would this only work with client side rendered pages?

@JoyofCodeDev

Жыл бұрын

I would think so because transitions are just Svelte actions which don't run on the server.

@jhonyortiz5

Жыл бұрын

@@JoyofCodeDev I see. Thanks:)

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. :/

@JoyofCodeDev

Жыл бұрын

You can use CSS Grid to stack the elements on top of each other.

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

@JoyofCodeDev

Жыл бұрын

What are you trying to do?

@maziasty

Жыл бұрын

@@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.

@JoyofCodeDev

Жыл бұрын

@@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…

@JoyofCodeDev

11 ай бұрын

Did you read the title? 😆

@morespinach9832

11 ай бұрын

@@JoyofCodeDev yes. I mean a good tutorial would start with a visual demo of how the final thing works. Then start the coding etc.

@JoyofCodeDev

11 ай бұрын

@@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.

@JoyofCodeDev

Жыл бұрын

I always find weird issues when using a store for page transitions but if it works for you I don't see why not.