GSAP ScrollTrigger with Nuxt 3 not working as expected

[GreenSock]

I'm totally the wrong guy to answer this because I have zero experience with Vue, but I just poked around a bit and it looks to me like the issue is that your function is getting called TWICE, so you're creating duplicate/competing tweens/ScrollTriggers and also replacing the context value without reverting the existing one. 

 

I don't really know why you had "main" in the watch() Array, but as far as I can tell that needs to be removed so you're only watching for a change in the transition state. Then it just calls it once. Heres a fork: 

https://stackblitz.com/edit/nuxt-starter-xpkswn?file=pages%2Fscroll.vue

 

Does that work better? I'm sure @Rodrigo and @Cassie could better speak to Vue-specific stuff, but this was my crack at it and from what I can tell, it works. Let me know if I'm missing something. 

[Rodrigo]

Hi,

 

Indeed Jack is right, there is no need for watching the main reference in Nuxt. It looks like you're mixing our Nuxt3 and Vue3 examples. There is a good reason for having the main reference in the watcher on our Vue example but not on Nuxt. Nuxt uses suspense for rendering routes so there is no need to create an eager watcher (that runs on the first render regardless if the reactive property being watched is updated or not) and because of that and the fact that we're using SSR there is no need to watch for the ref and to create an eager watcher. So just follow Jack's example and you should be fine.

 

https://vuejs.org/guide/essentials/watchers.html#eager-watchers

 

Finally in the future if you're working with Nuxt3 just use the starter templates we have in our collection for Nuxt3:

https://stackblitz.com/@GreenSockLearning/collections/gsap-nuxtjs-starters

 

If you want to use Vue with Vue Router use the examples in this collection instead:

https://stackblitz.com/@GreenSockLearning/collections/gsap-vue3-starters

 

Happy Tweening!

[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!

[Rodrigo]

Hi,

 

Just to clarify, this seems to be more related to some wrinkle in your app more than a GSAP related issue. I just took a deeper look at our example in Stackblitz, created a local deployment and also created a production deployment in Netlify and everything seems to be working as expected. There are no console messages that a specific ref used in the site is not defined or errors being thrown because of it:

https://ubiquitous-kitten-8e7dc4.netlify.app/

 

Happy Tweening!