LucieB Posted April 21, 2023 Posted April 21, 2023 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.agencyhttps://fix.studio https://www.humanastudio.com Thanks for helping… Lucie
Rodrigo Posted April 21, 2023 Posted April 21, 2023 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! 3 2
LucieB Posted May 1, 2023 Author Posted May 1, 2023 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 Posted May 1, 2023 Posted May 1, 2023 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! 1
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now