Jump to content
Search Community

Page transitions with Nuxt 3

LucieB test
Moderator Tag

Recommended Posts

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) :





Thanks for helping…



Link to comment
Share on other sites



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:





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



You can also check our Vue3 example as well:



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!

  • Like 3
  • Thanks 2
Link to comment
Share on other sites

  • 2 weeks later...

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…



Link to comment
Share on other sites



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:



Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...