I'm encountering a problem where Nuxt 3's CSS page transitions seem to interfere with GSAP ScrollTrigger animations in a Vue component. The animations are inconsistent: sometimes they trigger correctly upon page visit, but often they don't.
Key Points:
- The issue occurs in a Vue component using v-for to render a list, with each item having a ref.
- Animations are set up in the onMounted hook with GSAP's context, managed by ScrollTrigger.
- Inconsistency is observed in animation triggering.
Disabling the CSS page transition in Nuxt's configuration allows the ScrollTrigger to work correctly, indicating a conflict between Nuxt's page transitions and GSAP's ScrollTrigger.
I've set up a demonstration on StackBlitz to showcase the issue here https://stackblitz.com/edit/nuxt-starter-6alb54?file=pages%2Findex.vue . This demo includes a basic Nuxt 3 project setup where the described issue is reproducible. If you visit each project page, ScrollTrigger doesn't fire. Removing the page transition from the Nuxt config fixes this issue.
Is there a known issue with Nuxt 3's CSS page transitions affecting GSAP ScrollTrigger? What are the best practices or solutions to ensure consistent triggering of ScrollTrigger animations in this setup?
Any insights or suggestions to mitigate this conflict would be greatly appreciated.
Thank you!