Nuxt3 Page Transitions - scroll jumping to top before page transition.

[Windpixel]

Working on Nuxt3 Page Transtions and want to the scroll position to be retained on the .page-transition-leave-active element.

Currently if you scroll down from the top position, navigate to a new route, the page snaps to the top position before routing.

https://stackblitz.com/edit/nuxt-starter-ncqyhu?file=pages%2Findex.vue

To recreate the issue in the Stackblitz Min Dem.
1.) Go to the "ScrollTrigger" Route.

2). Scroll to the bottom (Orange Section)
3.) Click on the Layers Section Route. The orange section will snap to the blue (first section on the page), then animate out.

A couple of things to assist.
I have added the below css to allow the entering and leaving "pages" to overlap, creating more of a seamless transition. So this may play a role.

.page-transiton-enter-active {
  position: fixed;
  height: 100%;
  width:100%;
 top:0;
  left:0;
  right:0;
  bottom:0; 
  z-index:9; 
}

.page-transiton-leave-active {
  position: fixed;
  height: 100%;
  width:100%;
 top:0;
  left:0;
  right:0;
  bottom:0;  
  /* z-index:4; */
}

I have also set the pageTransition mode property to null, this allows the enter/exit pages to be in the DOM at the same time

const pageTransition = {

name: 'page-transiton',

// mode: '',

onEnter: (el, done) => {

Lastly, in my project I am using scrollSmoother, but was able to recreate the issue without S.M. Although, not sure if SM could be used as a tool to fix the issue.

<template>

<div id="smooth-wrapper" ref="wrapper">

<div id="smooth-content" ref="content">
 

</div>

</div>

 

Thanks in advance

 

 

[Rodrigo]

Hi 

 

The issue stems from the fact that the onUnmount hook is triggered before the out animation is completed.

 

An alternative could be to use a reactive property in the composable in order to watch the out animation, something like outAnimationComplete and instead of using the onUnmount hook, watch that property and revert the GSAP context instance using the watcher instead of the onUnmount hook.

 

Hopefully this helps.

Happy Tweening!

[Windpixel]

Yep. Bang on Rodrigo Thank you. Followed your advice and it worked right away. 

So far I have solved all the following 'problems' hopefully I can join you in the future as one of the support guys on here helping with Nuxt

• Nuxt3 w/ Super Smooth 0.75s GSAP Full Page Transitions - Pretty Much Instantaneous
• ScrollSmoother being initiated w/ effects turned on for Parallax Full Page Hero Backgrounds
• Scroll Triggers being setup after for various things, all context looked after so we can revert as needed.
• Sitewide Loading Screen followed by an entry animation
• A seperate entry animation for page revisits
• Window Resize Handling to reflow all the animations (Good for split text)
• A lot more to come Looking forward to sharing, but it will be another few weeks.

/** transiton-composable.js **/

const animationState = reactive({
  outAnimationComplete: false,
});


export const useAnimationComposable2 = () => {
  const toggleOutAnimationComplete = (value) => {
    animationState.outAnimationComplete = value;
  };

  return {
    animationState,
    toggleOutAnimationComplete,
  };

};

/** transitonConfig.js **/
const pageTransition = {
  ...
   onLeave: (el, done) => {
     ...
  onComplete() {
           toggleOutAnimationComplete(true);
           console.log("Out Animation is " + animationState.value);
           done();
          },
        })



/** page.vue **/
watch(
  () => animationState.outAnimationComplete,
  (newValue) => {
    try {
      if (newValue) {
        // Everything we dont want happen in unmount
        ctx && ctx.revert(); // <- Easy Cleanup!
        ctxH1 && ctxH1.revert(); // <- Easy Cleanup!
        ctxH2 && ctxH2.revert(); // <- Easy Cleanup!

        console.log("Special Unmount Happening");

      }
    } catch (error) {
      console.error(error);
    }
  }
);