PP-Tom

Hey @Rodrigo, I feel like I'm failing to explain correctly. While I completely understand that this is the correct functionality of FLIP, I feel like it could be enhanced by allowing to do it's calculations relative to the viewport and not the document. This is immensely helpful when, like in my example, you are clicking from a link to a page, this link could be anywhere on the page but the page it navigates to the image may cover the full screen. It allows for a smooth transition between pages. This seems to be FOUC (Flash Of Unstyled Content): https://gsap.com/resources/fouc/ Maybe you could set the visibility to hidden and before animating the Flip instance you can set the visibility back to visible: Not so much something different, by making the calculations relative to the viewport within GSAP, you don't have to manipulate the DOM directly before the calculations which will means the FOUC will never be an issue. Something like `{ includeScroll: false }` for when you are wanting to do an effect like this. EDIT: https://stackblitz.com/edit/nuxt-starter-sa9nzp?file=pages%2Findex.vue Maybe this is better explained by showing how it's fixed, so setting y and removing the scroll position allows for a smoother animation, however, here you are directly manipulating the DOM element, which means if there is a delay in the next page loading, the element will disappear off screen as you are setting the 'y' to allow for FLIP to do calculations. By allowing this as a flag to remove scroll position from it's calculations, you don't need to directly manipulate the DOM element meaning FOUC would not be an issue.

Hi @Rodrigo, Rather than the block expanding into place, it moves up into place as the scroll position resets in between pages. The best solution I've found so far is adding `gsap.set('.el', { y: -window.scrollY })` before storing the position in `Flip.getState()`. However, if there is an instance where the next page takes longer to load, in this case using data from a headless CMS. The block will disappear for a split second. I would like it just to expand into place and not move up into place. If there is a way for `Flip.getState()` is stored with removing the scroll position without directly manipulating the DOM element that would allow for a smoother experience.

https://stackblitz.com/edit/nuxt-starter-2nrszz?file=pages%2Findex.vue Hello, In this Demo if you scroll down to the red box and click it, you will see it animates the 'y' from further down the page than what is required. This makes sense because when Flip tracks all the information about the original element, it uses the 'y' position from the top of the document. That is fine until you want to do page animations, where an element that is down the page should appear at the top. Is there a way around this? Something like `Flip.getState('.el', { includeScroll: false })`? Thanks, Tom

That got it, thank you very much.

Hello everyone, I'm using Flip with an iFrame and it's causing re-renders so the video disappears and appears again at the start of the video. https://stackblitz.com/edit/web-platform-zrdszr Click the video to see the issue Does anyone know how to correct this?

Hey @Rodrigo, Here is the code on StackBlitz, if you scroll down the page then change to a different route you will see the marker fly up because it's calculating the x and y axis, but because of position fixed only x is necessary so I believe locking to only calculating the x would fix this. https://stackblitz.com/edit/sveltejs-kit-template-default-4hlskw?file=src%2Flib%2FHeader.svelte Thanks, Tom

Hey @GreenSock, thank you for your reply. This is exactly true, which is causing issues with SPA's when you don't want the scroll position considered. Since I can't show an SPA in Codepen or REPL, I've uploaded the project to Vercel so you can hopefully see more clearly the issue I'm having. https://henry-training.vercel.app/ If you scroll down then navigate to "About" you'll see the dot move up, I would like to lock it to only the "X" axis so it doesn't move up.

This is an issue I'm having with SvelteKit with changing between pages and the page scrolling back to the top, however, I can't do a CodePen of SvelteKit, so I've done a REPL to try my best to demonstrate the issue. It isn't exact replication as I can't do routing, but this should demonstrate what happens when moving between routes. Effectively I only care about how the menu indicator has moved on the x axis and not the y to prevent the behaviour of it moving up into place. I've tried `absolute: true` but this really isn't the answer. I've read through the documentation and I'm unsure of the solution here. Any advice would be greatly appreciated.