If anyone is stumbling upon this issue, i fixed it for me.
In the beforeNavigate hook i created a clone of the image i want to move on page transition with Flip.fit(). I also set the window.scrollY
to this element.
On the afterNavigate hook i call disableScrollHandling(). So the page dont scroll before transition end (default sveltekit behavior).
I used the build in svelte transitions (just simple fade), so i handle the next stuff inside the on:outroend callback.
There i scroll to the top immediately (im using lenis) and set the y attribute of the clone from window.scrollY to 0.
IMPORTANT: altough we're in the outro end callback i needed a timeout of 100 ms where i get the new target sate and call Flip.to() with targets: clone . OnComplete i remove the clone and we've got a nice smooth transition.
You can view it in my portfolio if im done with development joostramke.com.
I hope i could help if someone also struggles with this.
