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
Windpixel's post in Seamless page transition with Nuxt.js was marked as the answer