How to achieve a specific page transition using Nuxt 3

[xXkratosXx]

Hello there,

 

Im trying to achieve a specific page transition using nuxt 3 and gsap. I saw the starter code of a simple page transition when you define a custom transition in a seprate file and import it in every page using definePageMeta function and the specify the pageTransition to the one you defined and it work, however i want a specific pattern.

 

I'm going to explain my situation using tailwindcss

What I'm trying to achieve is this:

 

Make a page transition that have a  div initially with 'absolute w-full h-full bg-black top-0 left-0 ' so this div is covering the hole page even the default layout. On  onEnter i want to translateY by -100% so the page and the layout is visible. On onLeave set translateY by 100% then animate translateY by -100% ... This easely achievable using gsap

 

However the implementation in nuxt 3 is hard i think, i couldn't do it because in the page transition if i the definePageMeta the el the return in the onEnter or onLeave is the root of the page ex: index.vue

And if i add and another div in index.vue i got an error about the Transition component can't do animation if there is not one root element , i tried to make a seprate component for the transition and add this component inside every page  however the animation did not triggered for the onEnter and onLeave methods when change routes using the NuxtLink component or use router.push('url'), i don't know where is the problem, if anyone knows how to do this, please help,

 

Visit  Dennis website and try to change routes you will understand what i want to achieve.

 

 

And thank

[Rodrigo]

Hi @xXkratosXx and welcome to the GSAP Forums!

 

Yeah, I've been itching to create a demo of an overlay transition (that's at least what I call those types).

 

Your approach is good in terms of your HTML/CSS structure. The thing is that you have to watch for route changes in order to run the animation-in of the overlay and perhaps setup a Vue Composable in order to check when the next route is fully mounted and rendered (you might want to wait for images to be loaded or something like that) in order to run the animation-out of the overlay.

 

The approach we have in our Page Transitions demo is for animating the entire page component.

 

I hope to find some time ASAP in order to create a simple demo of that. In the mean time I hope that the info I shared provides a good starting point.

 

Happy Tweening!