Spice Up Your Site With SvelteKit Page Transitions

hey friends today I'm going to show you some awesome paid transitions using cell kit so here I'm just using the regular silky demo project so we can emulate a real project and don't have to set anything up so just create a new selfie project if you want to follow along and select the demo option as you can see this is all right but it's kind of vanilla right so how can we spice this up first thing we're going to do is open the layouts I'm going to press Ctrl P inside the project then I'm going to start typing layout let's open the root layout so basically what you're going to do here we have to use this layout and here is a slot where every page goes right so you can say hello this is going to show for every page and basically in cell kit if you didn't know every page is basically a component so if we can animate components mounting and unmounting we can do the same thing for pages but how can we do this right we have to first know when the navigation happened and then we have to somehow Mount and unmount this so how do we do this well we're going to learn a couple of neat tricks but first let's see how we can see when the page changed so we can use the page store I can say import page from going to be dollar sign app and it's going to be stores I think so let's just do it like this and then I'm going to use the snippet pre just so we can see what is inside and we have to pre-face it with the dollar because this is a silky store so this is just syntactic sugar so you can subscribe to it and now we get something interesting we get all the information about this page so we can see route ID and now when we navigate you can see the ID changes to about then it's swirtle and Etc even we have some other options like the URL so for example it won't show here let me just do a console log so I can say page URL and we can get even more options if I just open the developer tools Ctrl shift I let me just save this and now we can see for the URL we have host hostname ref origin and we're interested in path name right when we change this and if the console log updates we can do this is going to update and now we're also going to see that the pack name update but how can we create and recreate these blocks thankfully in circuit you can use a key block like this so you can say key and then you can give it the value when this value changes whatever is inside of here is going to get destroyed or unmounted and then it's going to mount it back again so that's how we can mount and unmount pages in this case and what we're going to use for the value we're going to use of course page and then you can use route ID or we can say path name like this and now I'm going to show you what the problem is with this approach so right now there's nothing going on but we need to add our transitions how do we add a transition we can just add an element and now we can use a transition from cell we can say transition we're going to import fly so I just pressed enter and this is imported at the top sometimes the input here is weird so keep attention if you're doing an Auto Import looks fine right now and then we can just say let's just say that X is going to be minus 200 and let's just save this and now since we're going to update this each time the key block is going to get destroyed and created again so let's see how this works awesome but can you notice a problem pay attention how at home and let's just make it more obvious we can say duration two seconds so what's going to happen this happens too late right our component is already going to be mounted so what's going to happen is the about page is going to go through the out transition and then in transition again so let's see what happens you can see it transition out and then it transitions again ah that sucks so what do we do now well basically this is why this method doesn't work for using the page store what we have to do is know that the page changed in advance and we can do that using a layout page so we can just send it as a prop again the same path name and then this is going to work fine alright so how do you do that then I'm going to go to the project Source routes and now we can create a plus layout TS or plus layout server which one you pick does it matter so you can just say plus layout TS and I'm going to export the load function export load function where we get also actually its export function load and now we can destructure the URL which is the same thing as you saw from the store so then we can return a URL which is going to be the URL and what we want from the URL path name right same thing we used before so right here we can go and we can delete this let's just remove all this code we don't need this anymore so now we're just going to take the prop export let data and now we can change this to be data URL all right so let's save this and let's see this already looks a lot better but as you can see here is a problem because in cell the transition is going to play in and out both you can see they overlap alright so how can we solve this problem and basically you can solve this easily you can just say in for example fly and now the duration since it's two seconds give it a delay which is going to be also two seconds and now we can also specify an out duration again two seconds we can save of course I put the wrong in we don't want the curly boys we can just do it like this and then let's remove this and also let's add equals right so we can just save this and now you're going to see there's going to be a delay for the intro animation so if you go to about uh you can see ah beautiful so now it works of course this is really slow so let's put it something 300 milliseconds and that's really awesome so you can see if we go to the about the about is going to show and we can also make it so for example if we enter right here is going to go from the left when we enter but let's say we want to exit on the right we can say here x 200 let's say this and now this should go to the right and we should get home from the left and how awesome is this as you can see here is some Jank also on the page so there's probably Styles in here in the body let's see so for right now you can set something like overflow hidden save it and then you won't get this Jank anymore alright that's awesome but I also want to show you how you can spy this up and create your own custom transitions so let me just close this we don't need layout anymore so basically custom transition functions are basically like swell textures but they return a special transition object so you can create whatever transition you want so let's create a transition where for example this element when it enters is going to scale from the left and when it exits it's going to scale back to the right so how do we create a custom transition in as well basically we can just go here and now we can say function let's name it scale and now this is going to take in a couple of things it's going to take a note which is going to be the element itself so that's the reference to the element and now it's going to take some options or parameters we can destructure them we can just say delay duration and easing and we can export a default easing from circuit so it has a lot of easings you can pick from let's pick something like cubic in and this is going to come from import cubic in from swelled easings I think yeah easing so we can find like here and we can set delay to be zero duration default 300 milliseconds and then we can set it to default and empty object and we're going to look at the types a bit later let me just say language typescript awesome and also another parameter that you're always going to have is a direction which swelt is going to do for you but we can just destructure it from options we can give it a default bulk because the value is in out or both and we can also set it to a default object all right so let me show you how simple this is basically the only thing you have to return from this is a special object that has the delay it has the duration easing and now as well to use a CSS so this isn't even JavaScript so it's very performant smelt is going to create a CSS animation from this and you only have to pass it a CSS function which is going to take T which is means time it goes from 0 to 1 it's really it's not the duration of your transition but it's just going to track when it starts and when it's done and basically this magical number t 0 to 1 you can also apply easings to it which is just some fancy math and that's how you get also easings and Etc so the rest here is just regular CSS right so this is beautiful so we can just say we can use the new CSS property scale so we don't even have to use transform and then you can use template literal so this is going to go from one to zero that's it and then we can spice it up by using transform origin so you can say Center Center which is the default let me save this and let's use this transition so you can go here we can say scale now we don't need X anymore and we can keep the rest because if you didn't know that's how all of these transitions itself also work they basically implemented like this even in the source code which is really awesome how simple it is considering you might be thinking how cell is this complicated thing but even the source code for this Auto transitions is relatively simple and easy to understand alright so now basically we didn't do anything special here but now when we transition you should see it should just scale but this is really not what we want even though if it's a cool effect you can also do cool things like let me just remember elastic out let's see elastic alt so this is going to be springy going you can see like this you can have a lot of fun and give a personality to your site but yeah let me just switch it back to what we used in cubic and you can also let me just looks well easings I think there's a rebel with all of the easing function visualization so I'm going to link that in the description give it a second just so it loads oh this is a cool one I didn't know about this but I was like thinking about another one is visualizer I think that was it yeah from the official cell site give it a second yeah so you can see here you can pick whatever you want easing out let's see e sine cubic as you can see these are all just math functions that apply to that zero to one scale so that's how you get this easing which is really cool so I'm going to link that and of course everything is going to be linked in the post alright but what is a cool thing that we can do here so how can we transform origin say okay go from the left and then go from the writer basically we can use this direction here so we can map the origin we can do something like this we can say const origin and now we can just give it value so we can say okay when you're in it's going to be Center left we're going to be out is going to be center right or actually let's just say bottom not Center and then the default which is going to be both is going to be Center Center all right so how do we use this well simple let's go here use a template and now you can say origin and let's pass the direction how awesome is this okay so now we can do this and now let's see oh but of course I'm silly and as you can see one downstairs you really have to pay attention what you're typing here so this is transform origin and if we go here we can see oh it goes to the right it starts from the left how cool is this friends right ah you can have so much fun awesome all right but let's spice it up we're going to show you something a bit more awesome so Trend it off let's create a fun effect instead of scale I'm going to right click I'm going to rename let's name it flush and then I can remove origin since I'm going to use this and we can also use rotate and we can use the turn value in CSS so we can say t turn so this is going to go from 1 to 0 which is going to be 360 degrees right so let me just save this and now I'm going to say that this should be one second here let me do it like this and then if you can see now we're going to get this effect and I also prepared a curious sound effect so we can also do this we can say Direction if it's going to be out then I'm going to play flush and now when we go to home to about [Music] how beautiful is this friends [Music] another way how we can place this sound since we have already discussion transition we don't have to use it but there's also on intro transition and start you can also play The Sounds or do whatever you want here as again you can read this more in the cell documentation but how awesome is this so now we have custom transitions as well you can impress your friends and co-workers [Music] the only thing left is you can abstract this into a soil component so let's do that I'm going to go to the sidebar routes and you can create this inside label wherever you want I'm just going to create it here so we can say transition sweld let me just close this I'm going to copy this part over so we're going to do it like this let's say the script and now we just need the key so we can just use the key here and then we can also export late duration and we can have 300 by default actually I can do it like this so now we can go to the duration we can leave it like this the delay should be the amount of the duration if you want to avoid that mistake right but of course depends what you're doing here let me save this and now let's also take flush so we can go here which you can also store in a separate file if you want I'm going to store it here for fun let's see what else are we missing you can also take this pour the sound from here we're also going to need cubic and fly but you're not using fly right so you can just go here let's remove Fly let's save it like this so we can remove all of this code we can remove this and now we can go here we don't need this block anymore so this is just going to be slot like before and now we can just import let's see if it's going to auto complete transition awesome so we have lib transition from soil and we can just leave it here you can name this whatever you want I like to be descriptive and say page transition so we can go here and name it page transition let's wrap it like this and now it's going to want let's see the duration and the key and the key of course is going to be data URL and what else did we say duration yeah so we can give it a duration of one second so we write everything and now let's see this should work [Music] how beautiful is this friends Chef kiss alright so that's it friends let me just show you the types for this if you're curious about this if you don't care about typescript you can leave right but let's also just give this a string so this really isn't that bad to type we just need a type of params and options so you can say type params you can also be more specific you can say flash params so delay is going to be optional it's a number then you have a duration which is again optional and now you can find this by just belonging through the soiled code so swelt exposes this easing function you can import so you can see from cell transition so that's basically it with params so we can do it like this save and now this should work great and we can also give it a return which is going to be another type that is poses is going to be transition config so we don't really have to type this function now it knows about T and also if you didn't know you can return U which is the opposite of T So T goes from 0 to 1 and U goes from one to zero so it's basically opposite of that now we have the params and now we just need to type the options so these directions I couldn't find the exported type for that so you can just do options Direction which is again going to be optional so there's in Alt and you have both and yeah you can also use this if you have an option object here so you can just say options and save this and that's basically it so now we have this new function we can reuse our beautiful transition is working as extended and yeah [Music] all right friends so don't forget to like And subscribe you can find my patreon in description and don't forget to join the Discord and as always thank you for watching and catch you in the next one peace foreign [Music]

Channel: Joy of Code

Views: 15,216

Keywords: svelte, sveltekit, page transitions

Id: gkw1wFIXM_8

Length: 17min 44sec (1064 seconds)

Published: Fri Apr 07 2023