Page Transitions Example

[evanwinter]

SvelteKit makes it really easy to do page transitions with svelte/transition. It would be cool to have a go-to example for this. This is how I've been doing it, but would love to know if there's a better way:

• Code: https://github.com/evanwinter/sveltekit-page-transitions
• Demo: https://sveltekit-page-transitions.netlify.app

https://user-images.githubusercontent.com/19195468/226080657-d5b9df9f-fe93-4d4a-8762-b88b6d563222.mov

---

• [x] the example is focused on a specific use case or technology
• [x] the example is self-contained and easy to grasp
• [x] the example is stable and does not require much maintenance

[karimfromjordan]

Yeah, this is pretty much how it's done in Svelte with most routers including Sapper and SvelteKit. Routers like Tinro also mention this approach in their READMEs. Something else I've been thinking about for the future is an example for page transitions using the new View Transition API. A few people have already been playing around with it. But that might be better as a separate example until all browsers support the API.