“App-like feel” 😍 with the View Transitions API & SvelteKit!

It’s one of the most exciting times to be a web developer, as most users can finally experience all the magic we can do with the new View Transitions API 🥳🚀🎉

Let’s learn all about it, and how to integrate it with my favourite meta framework, SvelteKit 🥰

A deep dive including CSS and animations, as well as a trip down memory line with tried and true web dev techniques of the past!

— COMMUNITY —
— 🥳🥳🥳 —

Highlighted software:

My older channel: @jmagrippis

No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄

Search for @jmagrippis to find me on socials like Instagram and Twitter!

Between the comment section, the socials, the Discord… let me know somewhere what you’d like me to cover next 🙌

🎶 “DuDa” by David Gives & “Running Late” by Brian Claxton for the background music 🎶

—
TIMESTAMPS
—
0:00 - Stack Navigation and why we want "app-like" feel
1:09 - the new onNavigate lifecycle method
3:03 - Typescript issues and extending Document
4:21 - Slide animations to better emulate Stack Navigation
6:44 - Let’s fix that Header! Not animating common elements
7:46 - How to target animation groups
8:40 - NOT animating when going to the page we're already on!
9:28 - FINAL 🚀 DEMO
9:39 - Taking things further + LIKE 🧡 SUBSCRIBE!

[nickstaresinic]

Nice, simple 'trick' to take the header out of the transition sequence!

[devmedia]

Awesome tutorial man..keep up the work

[BenedictGS]

Sending support ❤❤ thank you for the svelte content

[respise]

What about backward transition if we are going back?