Animation or transition doesn't work as expected (Wrongfully scales in Y)

[BhargavJ]

Hey everyone, fairly new to gsap flip animations, Am getting this weird behavior where my image in a card scales in Y directions\ which is unexpected, it creates a unwanted transitions and also when a card or image is in view it doesn't start from there (from current state), For example if I have a card  situated after few cards and when I click it when its in view, it scales and travels from way down, where the expected behavior should be just smooth scaling from current position.

I hope I explained my issue (I may have not explained well but it would be easier to understand by watching yourself)

This is what I want to somewhat achieve, a reference : https://raw.githubusercontent.com/mattcroat/joy-of-code/main/posts/impossible-layout-animations-with-svelte/images/flip-movies.mp4

 

MY CODE : https://stackblitz.com/edit/sveltejs-kit-template-default-rzlsxh?file=src%2Froutes%2F%2Blayout.svelte

 

Help would be really appreciated, Thanks!

[mvaneijgen]

Hi @BhargavJ welcome to the forum!

 

I'm missing a step in your Flip setup, the following is from the docs https://gsap.com/docs/v3/Plugins/Flip/

Quote

There are typically 3 steps to a "FLIP" animation:

...

Step 2 

 

Make your state changes

Perform DOM edits, styling updates, add/remove classes, or whatever is necessary to get things in their final state. There's no need to do that through the plugin (unless you're batching). For example, we'll toggle a class:

// make state changes. We'll toggle a class, for example:
element.classList.toggle("full-screen");

 

...

I see that you have something in your onStart, but that is not how Flip works it needs to add a class (or what ever logic you want to do in between) and then Flip.from(state, {...}) will create the tween for you. Exactly how it is explained in the docs. Maybe I'm missing something, but I don't see that in your +layout.svelte file?

 

I would also create all the setup on page load and give your Flip tween a name and then call myFlip.play() on route change. I'm not expert on Svelte, but if it would remember the logic in beforeNavigate and after... then you would be creating multiple tweens that would conflict with each other and then it will be important to do proper cleanup using gsap.context() https://gsap.com/docs/v3/GSAP/gsap.context()/

 

Hope it helps and happy tweening! 

[BhargavJ]

2 hours ago, mvaneijgen said:

Hi @BhargavJ welcome to the forum!

 

I'm missing a step in your Flip setup, the following is from the docs https://gsap.com/docs/v3/Plugins/Flip/

I see that you have something in your onStart, but that is not how Flip works it needs to add a class (or what ever logic you want to do in between) and then Flip.from(state, {...}) will create the tween for you. Exactly how it is explained in the docs. Maybe I'm missing something, but I don't see that in your +layout.svelte file?

 

I would also create all the setup on page load and give your Flip tween a name and then call myFlip.play() on route change. I'm not expert on Svelte, but if it would remember the logic in beforeNavigate and after... then you would be creating multiple tweens that would conflict with each other and then it will be important to do proper cleanup using gsap.context() https://gsap.com/docs/v3/GSAP/gsap.context()/

 

Hope it helps and happy tweening! 

Hey @mvaneijgen

 Thanks for the response, but the navigation is my state change, As I navigate to the next page the image should be scaled up and shown as seen in my code of my /dorms/[id]/+page.svelte route
I am referring to the code shown here : https://joyofcode.xyz/impossible-layout-animations-with-svelte#using-flip-for-page-transitions
Thanks!

[Rodrigo]

Hi,

 

This is mostly about the main layout and create some sort of coincidence between the page that has the result element in the final size and position in order to tell the Flip plugin the final and initial states, in order to create the correct animation. In this sense it doesn't matter the library and if it's a SSR system or not (SvelteKit, Nuxt, Next, Remix, Astro, etc.).

 

In this case the thing is to keep the state of the element throughout route changes, so for that you'll need a store that keeps and updates the state.

 

I have no experience with state management on SvelteKit and that's beyond the scope of the support we provide in these forums and I haven't created anything similar to this on another framework (Vue or React for example), so you'll have to find a way to create your HTML and CSS in order to create the effect you're after.

 

Happy Tweening!