DEV Community

Fluid page transitions with Svelte & Sapper

Stefan Buhrmester on July 03, 2019

UPDATE: This post is now over 2 years old, but it's still kinda relevant. This technique should work exactly the same with SvelteKit. Ever come ac...
Collapse
 
doppelganger9 profile image
David Lacourt

Hi, thanks for providing the changes and some examples.
It can lead to great effects in the UI, and it seems to be easy to achieve with what you've done.
I'm curious where did you get the idea? some other framework/library?

Collapse
 
buhrmi profile image
Stefan Buhrmester

No, I was looking at this site and thought it'd be cool if there was a way to achieve this sort of effect with built-in Svelte tools only.

Collapse
 
doppelganger9 profile image
David Lacourt

Okay, thanks!

This kind of animations are so cool!

If I follow the "inspiration chain", I see the influence of Sarah Drasner's work, I knew it ;-)

I once saw her live, back in 2017, and my mind was blown 🀯:

Collapse
 
sino_thomas profile image
Sino Thomas

Very interesting.
Got it to work in Svelte REPL: svelte.dev/repl/e5e3027d27cf4440a1...

Collapse
 
jeffalo profile image
jeffalo

Hey, is there something similar for SvelteKit? It seems like SvelteKit's layout system works differently.

Collapse
 
buhrmi profile image
Stefan Buhrmester

Sorry for the late reply. It should work exactly the same for SvelteKit

Collapse
 
jeffalo profile image
jeffalo

Thanks, it looks like there's a SvelteKit bug that causes the page to get duplicated. I'll check again though.

Collapse
 
giorgosk profile image
Giorgos Kontopoulos πŸ‘€

Stefan, this is great stuff thanks for posting

Collapse
 
franz profile image
Franz Sittampalam

this is hot, thanks for sharing

Collapse
 
stunjiturner profile image
S Tunji Turner

thanks for the post, I am having issues with the crossfade.js during deployment to now. the node_modules folder is in the .nowignore file as best practices? any ideas?