Nuxt 3 with Gsap Page Transition Example Bug

[KhaledOghli]

https://stackblitz.com/edit/nuxt-starter-bthjlg?file=README.md

 

Bug: When I changed the URL quickly in the navigation header  ( click many times fast )

I checked the reach Next.js version, and there is no bug.

 

[Rodrigo]

Hi,

 

Thanks for reporting. I investigated this and it seems to be related to just Nuxt and the way is handling route navigation itself.

 

If you check the console, you'll see this errors:

[Vue Router warn]: uncaught error during route navigation:   vue-router.mjs:35

Then you get an error when trying to revert the GSAP Context instance:

TypeError: Cannot read properties of undefined (reading 'revert')    vue-router.mjs:3451

This seems unrelated to GSAP and just something happening in Nuxt. The same example in Vue3 with Vue Router works as expected when you insanely click between routes.

 

We'll create a few other examples (using no animations but still using the transition component in Nuxt and using CSS animations as well in order to cover all the scenarios) an escalate this to the Nuxt team, but unfortunately after that the ball won't be on our court so I can't give you any time table for this to be resolved.

 

Until then, since the example we created uses a transition composable, my best advice would be to use that in Nuxt Link components and prevent navigation if the animation between routes is not completed.

 

We'll keep you posted as this progresses, so please stand by.

 

Happy Tweening!

[KhaledOghli]

Yeah, I think there is a bug in Vue Route with Transition Leave or some state.

I just found a workaround to use onBeforeLeave.

https://stackblitz.com/edit/nuxt-starter-ojthhx?file=helpers%2FtransitionConfig.js

I hope the Vue Team Solve this.