GSAP Flip Animation between pages sveltekit starts at wrong position

[jramke]

I wanted to add a page transition with Flip where an image from a list is moving to the place where it is on the detail page.

Something like this https://stackblitz.com/github/joysofcode/svelte-gsap-flip?file=src%2Froutes%2F04-movies%2F%2Blayout.svelte

 

 

i implemented it in my project but the animations starts at the wrong position.

If i log the Flipstate the elementStates.bounds are correct.

 

I tried it in a sandbox sveltekit template demo and there i got the same problem but only when going from about to home, if im going from home to about its working.

https://codesandbox.io/p/sandbox/zealous-babbage-rp4z43?file=%2Fsrc%2Froutes%2F%2Blayout.svelte%3A51%2C19

 

What am i missing?

 

 

 

 

[Rodrigo]

Hi,

 

I've been fiddling with your example but I can't find a way to make it work. It seems more related with CSS than GSAP, I forked your example and added a timeout in the after navigate hook and you can see that the image gets to the final state and then the animation happens in the same way of the example you have:

https://codesandbox.io/p/sandbox/angry-clarke-kynqp8?file=%2Fsrc%2Froutes%2F%2Blayout.svelte%3A1%2C1

 

I'll try to look a bit more into it when I have time to circle back to this.

 

Happy Tweenig!

[jramke]

Hi, 

 

thanks for your time. Unfortunately your codesandbox link gives me an error (Sandbox not found).

 

But as you said it is something css related. I edited my sandbox demo (removed some css and moved the data-flip-id directly to the img tag) and now its working.

https://codesandbox.io/p/sandbox/zealous-babbage-rp4z43?file=%2Fsrc%2Froutes%2F%2Bpage.svelte%3A13%2C84

 

Im going to play around with the css in my project and maybe i can make it work.

[jramke]

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.

  

[akapowl]

 

Good Job figuring things out.
 

14 hours ago, jramke said:

You can view it in my portfolio if im done with development joostramke.com.

 

Looks like for now it's mostly a Under Constrcution page - but in everything it does so far, it already reminds me a whole lot of dennissnellenberg.com.

 

Depending on how much more inspiration you decide taking from dennissnellenberg.com going forward in development of your page, I would consider mentioning that source somewhere, or he might get inspired to start another round of copydennis.com at some point.

In case you're not familiar with it, it was a website collection of creators who took a little too much inspiration from his portfolio page.
Apparently he decided to not keep it up anymore for now, which I personally think is a bummer.

 

https://www.awwwards.com/sites/copy-dennis-collection

 

[jramke]

hahah, yeah i got inspiration from his page, and some others, im going to mention them on the live site.
I didn't know this copydennis thing but I think I could have ended up there otherwise but i already threw out things like the footer and the page transition because it was really to similar to dennis'.