https://rgbstudios.org/_app/immutable/chunks/_page.2b7331f8.js

1import{S as da,i as ka,s as va,N as Oe,z as _a,A as ma,C as ya,R as Ea,T as aa,t as ha,b as wa,D as ba,O as sa,e as l,d as f,f as s,l as p,m as i,k as d,j as e,n,o as m,B as Ca,p as r,q as a,y as Pa}from"./index.bd0d3ab8.js";import{L as ga}from"./Layout.872cfa2b.js";function ja($){let u,k,y,x,c,E,L,z,$t,ut,M,Lt,ct,v,Mt,B,Ht,At,X,Gt,Nt,Q,Ut,Jt,H,qt,Ft,ft,dt,kt,A,Kt,vt,G,Vt,_t,N,Wt,mt,U,Y,zt,yt,g,Bt,Z,Xt,Qt,Et,O,oa=`<code class="language-js"><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">load</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">&#123;</span> url <span class="token punctuation">&#125;</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
2	<span class="token keyword">return</span> <span class="token punctuation">&#123;</span>
3		<span class="token literal-property property">url</span><span class="token operator">:</span> url<span class="token punctuation">.</span>pathname
4	<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
5<span class="token punctuation">&#125;</span><span class="token punctuation">;</span></code>`,ht,h,Yt,tt,Zt,te,et,ee,ae,wt,J,at,se,bt,w,ne,st,oe,le,nt,pe,re,Ct,S,la=`<code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">&#123;</span> fade <span class="token punctuation">&#125;</span> <span class="token keyword">from</span> <span class="token string">'svelte/transition'</span><span class="token punctuation">;</span></code>`,Pt,q,ie,gt,D,pa='<code class="language-js"><span class="token keyword">export</span> <span class="token keyword">let</span> data<span class="token punctuation">;</span></code>',jt,j,ue,ot,ce,fe,xt,R,ra=`<code class="language-svelte"><span class="token language-javascript"><span class="token punctuation">&#123;</span>#key data<span class="token punctuation">.</span>url<span class="token punctuation">&#125;</span></span>
6  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name"><span class="token namespace">in:</span>fade=</span><span class="token language-javascript"><span class="token punctuation">&#123;</span><span class="token punctuation">&#123;</span> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">250</span><span class="token punctuation">,</span> <span class="token literal-property property">delay</span><span class="token operator">:</span> <span class="token number">250</span> <span class="token punctuation">&#125;</span><span class="token punctuation">&#125;</span></span> <span class="token attr-name"><span class="token namespace">out:</span>fade=</span><span class="token language-javascript"><span class="token punctuation">&#123;</span><span class="token punctuation">&#123;</span> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">250</span> <span class="token punctuation">&#125;</span><span class="token punctuation">&#125;</span></span><span class="token punctuation">></span></span>
7    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token punctuation">/></span></span>
8  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
9<span class="token language-javascript"><span class="token punctuation">&#123;</span><span class="token operator">/</span>key<span class="token punctuation">&#125;</span></span></code>`,Ot,_,de,lt,ke,ve,pt,_e,me,rt,ye,Ee,it,he,we,St,F,be,Dt,b,Ce,I,Pe,ge,T,je,xe;return{c(){u=l("figure"),k=l("picture"),y=l("source"),x=f(),c=l("img"),L=f(),z=l("figcaption"),$t=s("Photo credit @juliakadel on Unsplash"),ut=f(),M=l("p"),Lt=s("Pages in Svelte Kit are similar to components, and they’re mounted and unmounted."),ct=f(),v=l("p"),Mt=s("We can use "),B=l("code"),Ht=s("transition:"),At=s(", "),X=l("code"),Gt=s("in:"),Nt=s(", and "),Q=l("co

9de"),Ut=s("out:"),Jt=s(" on them as well (learn more about "),H=l("a"),qt=s("transitions in svelte kit"),Ft=s(")."),ft=f(),dt=l("hr"),kt=f(),A=l("h3"),Kt=s("Steps"),vt=f(),G=l("p"),Vt=s("There are just two steps to creating page transitions with svelte kit!"),_t=f(),N=l("p"),Wt=s("(to see the thought process explained, as well as more detail on custom transitons, check the video linked below)"),mt=f(),U=l("p"),Y=l("strong"),zt=s("Step 1: Setting up url from your server"),yt=f(),g=l("p"),Bt=s("In your "),Z=l("code"),Xt=s("routes/+layout.server.js"),Qt=s(" file (create one if you don’t have one), export the url.pathname:"),Et=f(),O=l("pre"),ht=f(),h=l("p"),Yt=s("(if you already have a load function, add "),tt=l("code"),Zt=s("url: url.pathname"),te=s(" to the returned object and extract "),et=l("code"),ee=s("url"),ae=s(" from the parameter if you don’t already use it)"),wt=f(),J=l("p"),at=l("strong"),se=s("Step 2: Creating the page transitions"),bt=f(),w=l("p"),ne=s("In your "),st=l("code"),oe=s("routes/+layout.svelte"),le=s(" file, import the transition you want to use. I’ll be importing "),nt=l("code"),pe=s("fade"),re=s(":"),Ct=f(),S=l("pre"),Pt=f(),q=l("p"),ie=s("Next, we want to be able to recieve the data from our server file:"),gt=f(),D=l("pre"),jt=f(),j=l("p"),ue=s("Last, we will run the transition when "),ot=l("code"),ce=s("data.url"),fe=s(" changes:"),xt=f(),R=l("pre"),Ot=f(),_=l("p"),de=s("Make sure you set your "),lt=l("code"),ke=s("in"),ve=s(" transition "),pt=l("code"),_e=s("delay"),me=s(" to be the same as the "),rt=l("code"),ye=s("out"),Ee=s(" transition "),it=l("code"),he=s("duration"),we=s("."),St=f(),F=l("h3"),be=s("Related Video"),Dt=f(),b=l("p"),Ce=s("Check out this "),I=l("a"),Pe=s("video on svelte kit page transitions"),ge=s(" by "),T=l("a"),je=s("Joy of Code"),xe=s(" who has a lot of cool Svelte content!"),this.h()},l(t){u=p(t,"FIGURE",{});var o=i(u);k=p(o,"PICTURE",{});var Rt=i(k);y=p(Rt,"SOURCE",{type:!0,srcset:!0,alt:!0}),x=d(Rt),c=p(Rt,"IMG",{src:!0,alt:!0}),Rt.forEach(e),L=d(o),z=p(o,"FIGCAPTION",{});var Se=i(z);$t=n(Se,"Photo credit @juliakadel on Unsplash"),Se.forEach(e),o.forEach(e),ut=d(t),M=p(t,"P",{});var De=i(M);Lt=n(De,"Pages in Svelte Kit are similar to components, and they’re mounted and unmounted."),De.forEach(e),ct=d(t),v=p(t,"P",{});var C=i(v);Mt=n(C,"We can use "),B=p(C,"CODE",{});var Re=i(B);Ht=n(Re,"transition:"),Re.forEach(e),At=n(C,", "),X=p(C,"CODE",{});var Ie=i(X);Gt=n(Ie,"in:"),Ie.forEach(e),Nt=n(C,", and "),Q=p(C,"CODE",{});var Te=i(Q);Ut=n(Te,"out:"),Te.forEach(e),Jt=n(C," on them as well (learn more about "),H=p(C,"A",{href:!0});var $e=i(H);qt=n($e,"transitions in svelte kit"),$e.forEach(e),Ft=n(C,")."),C.forEach(e),ft=d(t),dt=p(t,"HR",{}),kt=d(t),A=p(t,"H3",{});var Le=i(A);Kt=n(Le,"Steps"),Le.forEach(e),vt=d(t),G=p(t,"P",{});var Me=i(G);Vt=n(Me,"There are just two steps to creating page transitions with svelte kit!"),Me.forEach(e),_t=d(t),N=p(t,"P",{});var He=i(N);Wt=n(He,"(to see the thought process explained, as well as more detail on custom transitons, check the video linked below)"),He.forEach(e),mt=d(t),U=p(t,"P",{});var Ae=i(U);Y=p(Ae,"STRONG",{});var Ge=i(Y);zt=n(Ge,"Step 1: Setting up url from your server"),Ge.forEach(e),Ae.forEach(e),yt=d(t),g=p(t,"P",{});var It=i(g);Bt=n(It,"In your "),Z=p(It,"CODE",{});var Ne=i(Z);Xt=n(Ne,"routes/+layout.server.js"),Ne.forEach(e),Qt=n(It," file (create one if you don’t have one), export the url.pathname:"),It.forEach(e),Et=d(t),O=p(t,"PRE",{class:!0});var ia=i(O);ia.forEach(e),ht=d(t),h=p(t,"P",{});var K=i(h);Yt=n(K,"(if you already have a load function, add "),tt=p(K,"CODE",{});var Ue=i(tt);Zt=n(Ue,"url: url.pathname"),Ue.forEach(e),te=n(K," to the returned object and extract "),et=p(K,"CODE",{});var Je=i(et);ee=n(Je,"url"),Je.forEach(e),ae=n(K," from the parameter if you don’t already use it)"),K.forEach(e),wt=d(t),J=p(t,"P",{});var qe=i(J);at=p(qe,"STRONG",{});var Fe=i(at);se=n(Fe,"Step 2: Creating the page transitions"),Fe.forEach(e),qe.forEach(e),bt=d(t),w=p(t,"P",{});var V=i(w);ne=n(V,"In your "),st=p(V,"CODE",{});var Ke=i(st);oe=n(Ke,"routes/+layout.svelte"),Ke.forEach(e),le=n(V," file, import the transition you want to use. I’ll be importing "),nt=p(V,"CODE",{});var Ve=i(nt);

9pe=n(Ve,"fade"),Ve.forEach(e),re=n(V,":"),V.forEach(e),Ct=d(t),S=p(t,"PRE",{class:!0});var ua=i(S);ua.forEach(e),Pt=d(t),q=p(t,"P",{});var We=i(q);ie=n(We,"Next, we want to be able to recieve the data from our server file:"),We.forEach(e),gt=d(t),D=p(t,"PRE",{class:!0});var ca=i(D);ca.forEach(e),jt=d(t),j=p(t,"P",{});var Tt=i(j);ue=n(Tt,"Last, we will run the transition when "),ot=p(Tt,"CODE",{});var ze=i(ot);ce=n(ze,"data.url"),ze.forEach(e),fe=n(Tt," changes:"),Tt.forEach(e),xt=d(t),R=p(t,"PRE",{class:!0});var fa=i(R);fa.forEach(e),Ot=d(t),_=p(t,"P",{});var P=i(_);de=n(P,"Make sure you set your "),lt=p(P,"CODE",{});var Be=i(lt);ke=n(Be,"in"),Be.forEach(e),ve=n(P," transition "),pt=p(P,"CODE",{});var Xe=i(pt);_e=n(Xe,"delay"),Xe.forEach(e),me=n(P," to be the same as the "),rt=p(P,"CODE",{});var Qe=i(rt);ye=n(Qe,"out"),Qe.forEach(e),Ee=n(P," transition "),it=p(P,"CODE",{});var Ye=i(it);he=n(Ye,"duration"),Ye.forEach(e),we=n(P,"."),P.forEach(e),St=d(t),F=p(t,"H3",{});var Ze=i(F);be=n(Ze,"Related Video"),Ze.forEach(e),Dt=d(t),b=p(t,"P",{});var W=i(b);Ce=n(W,"Check out this "),I=p(W,"A",{href:!0,rel:!0});var ta=i(I);Pe=n(ta,"video on svelte kit page transitions"),ta.forEach(e),ge=n(W," by "),T=p(W,"A",{href:!0,rel:!0});var ea=i(T);je=n(ea,"Joy of Code"),ea.forEach(e),xe=n(W," who has a lot of cool Svelte content!"),W.forEach(e),this.h()},h(){m(y,"type","image/avif"),m(y,"srcset","/img/blog/moving_train.avif"),m(y,"alt",""),Ca(c.src,E="/img/blog/moving_train.jpg")||m(c,"src",E),m(c,"alt",""),m(H,"href","/blog/svelte-kit-transitions-guide"),m(O,"class","language-js"),m(S,"class","language-js"),m(D,"class","language-js"),m(R,"class","language-svelte"),m(I,"href","https://youtu.be/gkw1wFIXM_8"),m(I,"rel","nofollow"),m(T,"href","https://www.youtube.com/@JoyofCodeDev"),m(T,"rel","nofollow")},m(t,o){r(t,u,o),a(u,k),a(k,y),a(k,x),a(k,c),a(u,L),a(u,z),a(z,$t),r(t,ut,o),r(t,M,o),a(M,Lt),r(t,ct,o),r(t,v,o),a(v,Mt),a(v,B),a(B,Ht),a(v,At),a(v,X),a(X,Gt),a(v,Nt),a(v,Q),a(Q,Ut),a(v,Jt),a(v,H),a(H,qt),a(v,Ft),r(t,ft,o),r(t,dt,o),r(t,kt,o),r(t,A,o),a(A,Kt),r(t,vt,o),r(t,G,o),a(G,Vt),r(t,_t,o),r(t,N,o),a(N,Wt),r(t,mt,o),r(t,U,o),a(U,Y),a(Y,zt),r(t,yt,o),r(t,g,o),a(g,Bt),a(g,Z),a(Z,Xt),a(g,Qt),r(t,Et,o),r(t,O,o),O.innerHTML=oa,r(t,ht,o),r(t,h,o),a(h,Yt),a(h,tt),a(tt,Zt),a(h,te),a(h,et),a(et,ee),a(h,ae),r(t,wt,o),r(t,J,o),a(J,at),a(at,se),r(t,bt,o),r(t,w,o),a(w,ne),a(w,st),a(st,oe),a(w,le),a(w,nt),a(nt,pe),a(w,re),r(t,Ct,o),r(t,S,o),S.innerHTML=la,r(t,Pt,o),r(t,q,o),a(q,ie),r(t,gt,o),r(t,D,o),D.innerHTML=pa,r(t,jt,o),r(t,j,o),a(j,ue),a(j,ot),a(ot,ce),a(j,fe),r(t,xt,o),r(t,R,o),R.innerHTML=ra,r(t,Ot,o),r(t,_,o),a(_,de),a(_,lt),a(lt,ke),a(_,ve),a(_,pt),a(pt,_e),a(_,me),a(_,rt),a(rt,ye),a(_,Ee),a(_,it),a(it,he),a(_,we),r(t,St,o),r(t,F,o),a(F,be),r(t,Dt,o),r(t,b,o),a(b,Ce),a(b,I),a(I,Pe),a(b,ge),a(b,T),a(T,je),a(b,xe)},p:Pa,d(t){t&&e(u),t&&e(ut),t&&e(M),t&&e(ct),t&&e(v),t&&e(ft),t&&e(dt),t&&e(kt),t&&e(A),t&&e(vt),t&&e(G),t&&e(_t),t&&e(N),t&&e(mt),t&&e(U),t&&e(yt),t&&e(g),t&&e(Et),t&&e(O),t&&e(ht),t&&e(h),t&&e(wt),t&&e(J),t&&e(bt),t&&e(w),t&&e(Ct),t&&e(S),t&&e(Pt),t&&e(q),t&&e(gt),t&&e(D),t&&e(jt),t&&e(j),t&&e(xt),t&&e(R),t&&e(Ot),t&&e(_),t&&e(St),t&&e(F),t&&e(Dt),t&&e(b)}}}function xa($){let u,k;const y=[$[0],na];let x={$$slots:{default:[ja]},$$scope:{ctx:$}};for(let c=0;c<y.length;c+=1)x=Oe(x,y[c]);return u=new ga({props:x}),{c(){_a(u.$$.fragment)},l(c){ma(u.$$.fragment,c)},m(c,E){ya(u,c,E),k=!0},p(c,[E]){const L=E&1?Ea(y,[E&1&&aa(c[0]),E&0&&aa(na)]):{};E&2&&(L.$$scope={dirty:E,ctx:c}),u.$set(L)},i(c){k||(ha(u.$$.fragment,c),k=!0)},o(c){wa(u.$$.fragment,c),k=!1},d(c){ba(u,c)}}}const na={layout:"blog_layout",title:"Page Transitions in Svelte Kit",slug:"page-transitions-in-svelte-kit",date:"2023/07/20",updated_date:"2023/07/20",author:"Justin Golden",preview_text:"A simple guide to page transitions in your svelte kit project",img:"/img/blog/moving_train.avif",categories:["webdev","svelte","svelte kit"],keywords:["svelte kit page transitions","svelte page transitions","page transitions","page transitions svelte","page transitions svelte kit"]};function Oa($,u,k){return $.$$set=y=>{k(0,u=Oe(Oe({},u),sa(y)))},u=sa(u),[u]}class Ra extends da{constructor(u){super(),ka(this,u,Oa,xa,va,{})}}export{Ra as default,na as metadata};