Nuxt 3 GSAP custom page transitions

<template>
  <NuxtLayout>
    <NuxtPage :transition="pageTransition"></NuxtPage>
  </NuxtLayout>
  <div id="transitionLayer" class="w-full h-0 overflow-hidden fixed top-0 left-0 bg-black z-[100] flex items-center justify-center">
    <div class="text-white text-6xl font-bold"><span id="transitionProgress">0</span>%</div>
  </div>
</template>

<script setup>
import pageTransition from './utils/transitionConfig.js';
</script>

import gsap from 'gsap';

export default {
  name: 'page-transition',
  mode: 'out-in',
  onEnter: (el, done) => {
    console.log('enter');
    done();
  },
  onBeforeLeave: el => {
    console.log(el);
    console.log('before leave');
    const transitionLayer = document.getElementById('transitionLayer');
    gsap.set(transitionLayer, {
      height: 0,
      top: 'auto',
      bottom: 0
    });
    gsap.to(transitionLayer, {
      height: '100%',
      duration: 1,
      ease: 'power2.out'
    });
  },
  onLeave: (el, done) => {
    console.log('leave');
    const transitionLayer = document.getElementById('transitionLayer');

    gsap
      .timeline({
        delay: 1,
        onStart: () => {
          done();
          gsap.set(transitionLayer, {
            top: 0,
            bottom: 'auto'
          });
        }
      })
      .to(transitionLayer, {
        height: 0,
        duration: 0.5,
        ease: 'power2.inOut'
      });
  }
};