Nuxt 3 GSAP custom page transitions
i'm having a little problem about nuxt 3 page transition hooks. onBeforeLeave doesn't fire until redirected page loads. problem is i'm using useAsyncData for my profile page. And page transition doesnt start until that function completed, so user still wait in the same page.
here is the source codes:
app.vue
transitionConfig.vue
here is the source codes:
app.vue
<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><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>transitionConfig.vue
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'
});
}
};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'
});
}
};