Seamless page transition with Nuxt.js

[Nicolaseliell]

Hey, this question is not directly related to GSAP but I thought you guys might have some good insight about this: I'm trying to create a page transition similar to this site: https://vucko.co/ but I struggle to find a way to make the page transition seamless so that the previous & next page are visible at the same time for a brief moment, this creates the effect that the page never changes while the next page is transitioning from bottom to top. My main problem is that when I create a javascript transition with Nuxt & GSAP the previous page has to go away before the next one even has a chance to be visible. I'm not an expert with page transitions so I might be missing something fundamental here. Here is a basic demo of a Nuxt transition setup I have been using: https://stackblitz.com/edit/nuxt-starter-lq1ckq?file=helpers%2FtransitionConfig.js

[GreenSock]

I'm not familiar with Nuxt at all, but perhaps this will help: 

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

[Windpixel]

12 hours ago, Nicolaseliell said:

Hey, this question is not directly related to GSAP but I thought you guys might have some good insight about this: I'm trying to create a page transition similar to this site: https://vucko.co/ but I struggle to find a way to make the page transition seamless so that the previous & next page are visible at the same time for a brief moment, this creates the effect that the page never changes while the next page is transitioning from bottom to top. My main problem is that when I create a javascript transition with Nuxt & GSAP the previous page has to go away to before the next one even has a chance to be visible. I'm not an expert with page transitions so I might be missing something fundamental here. Here is a basic demo of a Nuxt transition setup I have been using: https://stackblitz.com/edit/nuxt-starter-lq1ckq?file=helpers%2FtransitionConfig.js

 

Ok. So literally two weeks ago I didn't know what Nuxt was, but thanks to the wonderful people in this forum, they have helped me get to this stage.

My new site in progress with seamless Nuxt3 Page Transitions: gsap.windpixel.com.au.

But back to your problem, I added this css into the style.css file to allow both entering and leave pages to be overlapped.

 

They get added into the DOM at the same time, so by default, they stack giving un desirable effects.

 

Here is a working demo for of yours with seamless transitions:

https://stackblitz.com/edit/nuxt-starter-sxwssz?file=helpers%2FtransitionConfig.js

.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 added back the logic to track when page transitions are starting and ending, this is vital to the site working as you need to fire and cleanup certain things when the pages are done. I also made a const to handle the duration for enter and leave, these should be the same so makes sense to tie them together.

import gsap from 'gsap';

import { useTransitionComposable } from '../composables/transition-composable';

const { toggleTransitionComplete } = useTransitionComposable();

const duration = 0.6;

const pageTransition = {
  name: 'page-transiton',
  mode: '',
  onEnter: (el, done) => {
    gsap.set(el, { yPercent: 100 });
    gsap
      .timeline({
        paused: true,
        onComplete() {
          toggleTransitionComplete(true);
          done();
        },
      })
      .to(el, { yPercent: 0, duration: duration})
      .play();
  },
  onLeave: (el, done) => {
    toggleTransitionComplete(false);
    gsap
      .timeline({ paused: true, onComplete: done })
      .to(el, { duration: duration })
      .play();
  },
};

export default pageTransition;

I hope that helps. If your journey is anything like mine, you will encounter quite a few problems to solve, but once you get past that, full page transitions are amazing!
- Lance