Alleen

Thank you both for your answers! Removing the extra watcher results into a working example, but sadly not in my project. I added the main reference to the watcher, because sometimes (especially on page refresh) the main.value is undefined, which results into not animating the nodes that I want at all. I'm not sure how that differs from the example project. For example in a component I have the following: watch( () => transitionState.transitionComplete, (isTransitionComplete) => { if (isTransitionComplete) { ctx.value = gsap.context((self) => { console.log('homepageRef', homepageVideoRef.value) const text = self.selector?.('.homepage-video__cta') gsap.set(text, { x: -100, opacity: 0, duration: 2, }) gsap.to(text, { x: 0, opacity: 1, ease: 'Power4.easeOut', scrollTrigger: { trigger: text, start: '-=200 50%', end: 'bottom 50%', scrub: 1, }, }) }, homepageVideoRef.value) } } ) onUnmounted(() => { ctx.value?.revert() }) I'm logging the homepageRef to the console. I'm seeing the following: Do you have any experience with this issue before? The reference is available in the onMounted state, but then the page transition doesn't work anymore. Edit: Not sure if it will help in any way, but I made a screen recording of the issue that I am facing. It can be watched here: https://streamable.com/wadxn2 Edit 2: I managed to solve the issues. There were two problems, one where the reference is undefined. I fixed that with the not so elegant setTimeout option (but it works for now). The other issue that the animation was not starting correctly, because I was using a stacked effect with CSS display sticky. I replaced it with the pin option of ScrollTrigger for the same effect. Thank you for your support, time and warm welcome to the forum!

Dear @Rodrigo, Thank you for the tips and example. I have moved away from CSS animations and now the timing seems to be better, but while navigating through the pages it appears that the scroll position is not correctly calculated. It jumps or simply won't start the animation at all. I will try to create a simple version in StackBlitz out of the actual project I'm working on. Hopefully you'll have the time to help me out with this. EDIT: A sample example of what I think I'm experiencing in my project: https://stackblitz.com/edit/nuxt-starter-tx3skg?file=pages%2Fscroll.vue When refreshing the page on the "Scroll Trigger" tab it works as expected, but when navigating from "Layers Section" back to "ScrollTrigger", you'll notice that the animation is not working properly anymore. In my project the translation jumps from `translate3d(-120px, 0px, 0px)` to `translate3d(2px, 0px, 0px)`. Have an awesome evening!

Hey @Rodrigo, First of all I want to thank you for sharing an example how to use GSAP with Nuxt 3. Just as Svenilla I'm trying to use Scroll Trigger, but seem to have mount / unmount issues when page transition is enabled. I've tried to use the same set-up as the example project above and I get a different issue, but perhaps they are related to what I am having now in my own project. When using page transitions (enabling it in the nuxt.config.ts) with same basic fade effect will result into an error and/or not playing the scroll animation: URL: https://stackblitz.com/edit/nuxt-starter-mvowjp?file=pages%2Fscroll.vue,nuxt.config.ts app.vue <template> <Header /> <NuxtPage /> </template> <style> .page-enter-active, .page-leave-active { transition: all 0.2s; } .page-enter-from, .page-leave-to { opacity: 0; filter: opacity(50%); } </style> nuxt.config.ts // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ app: { pageTransition: { name: 'page', mode: 'out-in' }, }, css: ['@/assets/styles.css'], build: { transpile: ['gsap'], }, }); Also I noticed if you navigate really fast between the tabs it also breaks the animation and the website stops working.