Nuxt3 Flip animation between pages ignore scroll position

[PP-Tom]

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

[Rodrigo]

Hi,

 

I've read your question a few times and check the demo link you provided but I can't seem to understand what is the issue you want to solve.

 

As far as I can see Flip is doing exactly what's supposed to do, but maybe I'm missing something here 🤷‍♂️

 

Happy Tweening!

[PP-Tom]

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.

[Rodrigo]

11 minutes ago, PP-Tom said:

Rather than the block expanding into place, it moves up into place as the scroll position resets in between pages.

That is exactly what should happen, Flip gets the state of the element then when the element has changed it animates it from the state that was captured. If the element is below the fold, Flip will animate it from that particular state. In that state the element is below the fold so Flip moves it there and animates it to the natural state of the element.

 

From this I gather something different though:

49 minutes ago, PP-Tom said:

The block will disappear for a split second. I would like it just to expand into place and not move up into place.

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:

.box--red {
  background: red;
  visibility: hidden;
}

Then in the animation:

onMounted(() => {
  if (useFlipState().value) {
    Flip.from(useFlipState().value, {
      targets: box.value,
    });
    gsap.set(box.value, { visibility: "visible" });
  }
});

Hopefully this helps.

Happy Tweening!

[PP-Tom]

On 2/9/2024 at 9:38 PM, Rodrigo said:

That is exactly what should happen, Flip gets the state of the element then when the element has changed it animates it from the state that was captured. If the element is below the fold, Flip will animate it from that particular state. In that state the element is below the fold so Flip moves it there and animates it to the natural state of the element.

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.

 

On 2/9/2024 at 9:38 PM, Rodrigo said:

From this I gather something different though:

On 2/9/2024 at 8:27 PM, PP-Tom said:

The block will disappear for a split second. I would like it just to expand into place and not move up into place.

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.

[Rodrigo]

Yeah, as you mention this is more related to the fact that SPA and even SSR systems like Nuxt handle the scroll position when changing routes.

 

Maybe you can roll your own small plugin to feed a specific scroll position for your app when changing the routes as suggested here:

https://github.com/nuxt/nuxt/issues/12732

 

Hopefully this helps.

Happy Tweening!