Page transitions with Nuxt 3

[LucieB]

Hi everyone,

 

I'm actually discovering Nuxt 3, and am trying to manage page transitions with GSAP. I'm sorry if my questions also concern Nuxt (and not only GSAP), but I hope to find answers on this forum, which brings together a community of creative people.

On the documentation, I saw we can animate page transitions with class names and CSS.  But, I'm wondering if a transition manager like Highway exists to use GSAP with my website (e.g. onEnter, onEnterCompleted, onLeave, and onLeaveCompleted functions). My ideal goal would be to animate a page transition and to animate an intro (not the same animation). 

 

I do not have a CodePen to share, but here's an illustration of what I'd like to achieve :

 

When the user navigates to the About page, the square goes to position B. And when the user returns to Home, the square goes to position A.

 

References of websites I saw using Nuxt and GSAP (that do not use CSS class names like on the Nuxt documentation) :

https://www.heights.agency
https://fix.studio

https://www.humanastudio.com

 

 

Thanks for helping…

 

Lucie

[Rodrigo]

Hi,

 

There is no need for something like Highway or any third party library for creating page transitions in Nuxt. Nuxt uses Vue's native transition component for that:

https://vuejs.org/guide/built-ins/transition.html

 

https://nuxt.com/docs/getting-started/transitions

 

We do have an example that uses GSAP for creating route transitions in Nuxt3:

https://stackblitz.com/edit/nuxt-starter-bthjlg

 

You can also check our Vue3 example as well:

https://stackblitz.com/edit/vitejs-vite-w8wtpj

 

Hopefully this is enough to get you started. If you have more questions let us know and remember to include a minimal demo. You can fork any of the starter templates I linked above.

Happy Tweening!

[LucieB]

Hey Rodrigo, thank you for the links !

[LucieB]

Hi @Rodrigo, 

 

I have a new question related to your answer, and the example created using GSAP with Nuxt 3: If I understand correctly the example, the code is only used for page transitions. How can we create an intro for each page (that could be different for each of them)? The goal would be to add an intro to each page, not to have this animation when changing pages, but only on the first site load. 

I tried to change some values on the function, but it failed every time because the animations play always. The only way I found is to add an animation inside the App.vue file (but how to know on which page we are, and call the right animation?)

 

Thanks for helping…

 

Lucie

[Rodrigo]

Hi,

 

You could create a reactive value in the app.vue file to check whether or not this is the first render/route animation. You could also do that in the animation composable as well or create your own composable (which seems a bit overkill IMHO). Also you can use the transition config file created in those examples. Just some boolean that tells you that the first render and the first transition animation has already ran, nothing more.

 

As for knowing the current route, you can use the useRoute composable:

https://nuxt.com/docs/api/composables/use-route

 

Hopefully this helps.

Happy Tweening!