nuxt3 - GSAP animation not running after NuxtLink navigate in same layout

[guehring]

If i load a page all animations are running fine, but if i navigate there via <NuxtLink to=""> the animation isn't running if the used layout is the same.
If i have a different layout in the traget page the animation is running fine again. 

https://stackblitz.com/edit/github-3g7ck2?file=pages/test1.vue

Thanks for helping
Moritz

[Rodrigo]

Hi @guehring and welcome to the GreenSock forums!

 

I think this is related to something in Nuxt or Vue+SSR than GSAP. I forked your example and created a third layout called asdasdasdas.vue and is working as expected:

https://stackblitz.com/edit/github-3g7ck2-ipo3rc?file=pages%2Ftest1.vue

 

For some reason that I couldn't tell you, either Nuxt or Vue+SSR don't treat a component or layout with the text main in it in the same way they treat other files. This is definitely not a GSAP problem since when you use another name for the file it works as expected, so you should use different names for your layouts and ask around Nuxt's discord channel or create an issue on Nuxt's github repo.

 

Finally keep in mind that Nuxt3 is still in release candidate stage, not even beta, so my advice would be to play around with it but don't waste a lot of time since is quite probable that some of the API could change when they release anything close to a stable version.

 

Let us know if you have more questions.

 

Happy Tweening!