Page transition not working as expected in Nuxt 3

[nicolaseielll]

Hey, I have recently started to dig into Nuxt 3 javascript page transitions with gsap and I am unable to get this simple javascript fade transition to work properly. There must be something that I don't understand here since I'm assuming that the hooks & the animations are correctly setup to the transitionConfig.js but it still does not fade smoothly to the next page, the leave animation looks good but onEnter doesn't.

I forked the Nuxt 3 page transition project on Stackblitz to match the setup in my local setup so I managed to reproduce the problem here: 

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

[Rodrigo]

Hi,

 

The main issue is that your transition doesn't have a mode, so at some point both elements are in the DOM at the same time, which causes a layout issue, that's why you see the jump or that the animation doesn't happen. If you give your transitions a long time and inspect the DOM you'll see both elements at the same time in the DOM.

 

That's why we use the mode out-in in our examples:

https://vuejs.org/guide/built-ins/transition.html#transition-between-elements

 

If you check this simple example created by the Vue team and delete the mode prop in the Transition component, you'll see the issue at a smaller scale. That is exactly what's happening in your example but at a larger scale.

 

So adding a mode out-in to the transition config object fixes that.

const pageTransition = {
  name: 'page-transition',
  mode: 'out-in',
  css: false,
  onBeforeLeave: (el) => {},
  onLeave: (el, done) => {
    gsap.to(el, {
      opacity: 0,
      duration: 0.4,
      ease: 'expo.out',
      onComplete: () => {
        done();
      },
    });
  },
  onBeforeEnter: (el) => {
    gsap.set(el, { opacity: 0 });
  },
  onEnter: (el, done) => {
    gsap.to(el, {
      opacity: 1,
      duration: 0.4,
      ease: 'expo.in',
      onComplete: () => {
        done();
      },
    });
  },
};

Finally is worth noticing that you're not toggling the transitionComplete property from the composable, so your ScrollTrigger instances are not being created, just an FYI.

 

Hopefully this helps.

Happy Tweening!

[nicolaseielll]

Thank you so much! It works now! I was also missing the onBeforeEnter gsap.set().