How does nuxt calculate the time before it redirects/switches to the new page between page transitions? I know it's done automatically when defining transitions through CSS however I'm using GSAP for my animation. Will nuxt figure the time by themself or am I required to set it?
Here you could find the actual flow of client-side navigation
Here are the various steps regarding the CSS transitions in Vue
And here are Nuxt global page transitions
nuxt.config.js
export default {
buildModules: ['nuxt-gsap-module'],
// Add global page transition
pageTransition: {
name: 'page',
mode: 'out-in',
css: false,
beforeEnter(el) {
this.$gsap.set(el, {
opacity: 0
})
},
enter(el, done) {
this.$gsap.to(el, {
opacity: 1,
duration: 0.5,
ease: 'power2.inOut',
onComplete: done
})
},
leave(el, done) {
this.$gsap.to(el, {
opacity: 0,
duration: 0.5,
ease: 'power2.inOut',
onComplete: done
})
}
}
}
There is no special magic here: just Nuxt using the hooks available for the transitions.