Simple SvelteKit Page Transitions Using The View Transitions API
Рет қаралды 17,287
Күн бұрынLearn how to animate state and page transitions with ease using the View Transitions API.
👉️ Support
🔴 Patreon
/ joyofcode
👉️ Links
Native Page Transitions With SvelteKit
🔗 joyofcode.xyz/sveltekit-view-...
👉️ Setup
🔗 joyofcode.xyz/uses
👉️ Socials
🐦️ Twitter:
/ joyofcodedev
💬 Discord
joyofcode.xyz/invite
🔖 Timestamps
0:00 Intro
0:33 What Is The View Transitions API?
2:46 Animating Page Transitions
15:55 Animating State Transitions
20:29 Prefers Reduced Motion
21:12 Outro
#joyofcode #sveltekit #svelte
@jaminroberts2333 9 ай бұрын
Amazing. Thank you. I attempted to implement view transitions in a SvelteKit project yesterday after toying with it in Astro, and I aimlessly stumbled around a buggy solution.
@brokiama 9 ай бұрын
This is a great video. It's great that transition animations are this simple now😅
@JoaoLucas-tw2pt 6 ай бұрын
bro this is amazing
@RodrigoDAgostino 9 ай бұрын
Amazing overview, as always! :) Last night I started playing around with View Transitions by mainly following this tutorial, and I’ve been meaning to ask you: how would you go about solving the dimensions issue on the button if you had multiple buttons inside the same page? The only way around that I’ve been able to come up with was to create a element through JS inside the , adding the pertaining ::view-transition selectors and properties to it, and appending it to the page, which is definitely not the cleanest, but does the job.
@nanashi7726 9 ай бұрын
Wait, this video is awsome. This is the best explanation I've ever seen for view transition
@JoyofCodeDev 9 ай бұрын
Thank you! 😄
@gageracer 9 ай бұрын
Great explanation! One minor issue is the button transitioning moves the rest of the elements and the planet scales for a frame or so.
@twd2 9 ай бұрын
Awesome 😍 !!!
@shaikhspare7019 8 ай бұрын
You are the man of guts. Big fan Sir😍
@Eloii_Xia 9 ай бұрын
Me : this is a revolution ! GSAP, Motion, Locomotive and every animation libraries : "Hello darkness, my old friend I've come to talk with you again Because a vision softly creeping Left its seeds while I was sleeping And the vision that was planted in my brain Still remains Within the sound of silence"
@JoyofCodeDev 9 ай бұрын
I only used GSAP from these and I don't think it's going anywhere because nothing comes close to it.
@Eloii_Xia 9 ай бұрын
@@JoyofCodeDev Today, Bun Runtime has reached version 1.0 and has the potential to outperform both Node and Deno simultaneously. I believe that any skilled individual could create a library that potentially surpass GSAP as well :D. By the way, I've started using Bun + Svelte to test it, and the experience has been truly remarkable! You can also build a SvelteKit project with bun + bun adapter
@MrMelvinalmonte 9 ай бұрын
This guy don't miss. Great video
@JoyofCodeDev 9 ай бұрын
Thank you! 😄
@EliSpizzichino 9 ай бұрын
very cool! We're back with the visual-fx of 2 decades ago (that I'm actually fond of). Too bad it doesn't work on firefox
@Allformyequine 9 ай бұрын
Way cool!! Makes me want to up my Patreon support amount lol!! Just love your stuff!!
@JoyofCodeDev 9 ай бұрын
Thank you! 🙏
@b1mind 9 ай бұрын
The future of the web is looking bright!
@kylerjohnson988 3 ай бұрын
Great content as always. Also, I just realized today that you’re a fellow Manjaro Gnome user! I’ve been on Manjaro myself since 2018 and I love it.
@peterkrau4486 9 ай бұрын
Does anyone know the VSCode theme used in this video? I looove it ❤
@expresstutorial3255 6 ай бұрын
Amazing, what will the result if a page have a loading??
@Eloii_Xia 9 ай бұрын
Imagine combine this with scroll / touchscreen events and intersectionObserver() 🤯🤯🤯🤯
@JoyofCodeDev 9 ай бұрын
I've seen some awesome scrolling animations using the View Transitions API.
@pengain4 9 ай бұрын
View transitions looks nice but they also feel a bit laggy. Is it because we need to load new page, layout is elements and only then we can animals planet transition?
@Woeden 9 ай бұрын
Have you tried SvelteKit with Bun? Is it too different from pnpm, not really that compatible?
@kfibcudwiefjw7428 5 ай бұрын
I really don’t see why you would use this over non-native transitions, done with SvelteKit itself without the api. If I animate Svelte transitions, I won’t have to worry about browsers not supporting transitions yet
@jwr6796 5 ай бұрын
I think this isn't the way to go yet, but it's exciting that there is a (hopefully near) future where we don't need to rely on framework-specific workflows to do these kinds of animations and can write more easily portable code.
@greendsnow 9 ай бұрын
Are you reading minds? Because this was the video I was hoping to see.
@JoyofCodeDev 9 ай бұрын
That's what I've seen. 🔮
@greendsnow 9 ай бұрын
@@JoyofCodeDev we need another video on this same subject but made with revealjs and focusing only on the key parts; like we add this code and this happens, and this and that happens... it's a little complex.
@sinasalahshour 9 ай бұрын
i wish we could see page transitions on firefox
9 ай бұрын
🤯🤯🤯🤯🤯
@sergrojGrayFace 4 ай бұрын
18:10 - if startViewTransition is unavailable, this function must call 'action' directly and not just return.
@ryan_roga 9 ай бұрын
Ugh, I love Vue. I just wish it was a liiiiiitle bit more like Svelte.
@gadgetboyplaysmc 9 ай бұрын
What VScode them and font do you use?
@JoyofCodeDev 9 ай бұрын
It's in the description.
@addidix 9 ай бұрын
Can you please do a video on how to do onboarding I’m sveltekit
@gm00001 9 ай бұрын
Are you using a riced linux distro? Just curious!
@JoyofCodeDev 9 ай бұрын
It's just Manjaro GNOME with Pop Shell for tiling.
@gm00001 9 ай бұрын
@@JoyofCodeDev Cool! I am currently playing with QTile but damn, I miss Gnome facilities.
@JoyofCodeDev 9 ай бұрын
I use what works out of the box but I would love to play around with Hyprland.
@Woeden 9 ай бұрын
Now that 5 second intro hitted hard 🥲. Anyways, view transitions are here!!
@JoyofCodeDev 9 ай бұрын
I didn't mean it. 😂
@jeremykoay1774 8 ай бұрын
The following error message showed up when run command "npm run build": error during build: RollupError: "onNavigate" is not exported by "node_modules/.pnpm/@sveltejs+kit@1.20.4_svelte@4.0.5_vite@4.4.2/node_modules/@sveltejs/kit/src/runtime/app/navigation.js", imported by "src/lib/Navigation.svelte".