Inconsistent Scroll Trigger with PageTransitions In Nuxt 3

[Tulip781]

 

I'm experiencing inconsistent behavior with GSAP scroll trigger animations not firing consitently in a Vue component. Sometimes when I visit the page, the animations run as expected, but other times they don't trigger at all. I'm using Vue's onMounted lifecycle hook to set up the animations on a list of elements.

 

Here's a simplified overview of my setup:

• I have a Vue component that renders a list of elements using v-for.
• Each element in the list is assigned a ref (blockRefs).
• In the onMounted hook, I'm using GSAP's context to animate these elements as they enter the viewport, controlled by ScrollTrigger.

The issue is that the animations are not consistently triggered upon visiting the page. Sometimes they work perfectly, and other times they don't activate at all.

I'm wondering if there's a potential issue with the way GSAP's context or ScrollTrigger is interacting with Nuxt/ Vue's reactivity or the component lifecycle. Any insights or suggestions on what might be causing this inconsistency would be greatly appreciated.

 

I've set up a demonstration on StackBlitz to showcase the problem. You can find it here:https://stackblitz.com/edit/nuxt-starter-6alb54?file=pages%2Findex.vue

 

Details of the Demo:

 

Project Structure: The demo consists of two project pages and an index page.

 

Observation: When you visit the project pages and then return to the home page, the ScrollTrigger animations do not activate as expected.

 

Additional Insight: Interestingly, if you go into the Nuxt Config and comment out the page transition setting, the ScrollTrigger then works correctly.

 

This behavior suggests that there might be a conflict or an issue with the interaction between Nuxt's page transitions and GSAP's ScrollTrigger within the Vue ecosystem. I suspect the problem lies in how the lifecycle hooks are managed alongside the transitions, possibly affecting the activation of the ScrollTrigger.

Any insights, especially regarding the interaction between GSAP's context, ScrollTrigger, and Vue's lifecycle within the Nuxt framework, would be immensely helpful. I'm looking forward to your thoughts and suggestions on how to resolve this inconsistency.

 

Thank you!

 

Edited December 7, 2023 by Tulip781
This message has been editing to include stackblitz example

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Tulip781]

Thank you, I will work on the StackBlitz demo now. I use CSS transition in my Nuxt config,  and removing the page transition line solves this issue. however, I need to have the transitions. I noticed a similar problem reported here. If anyone knows a fix, i would be so grateful.

 

[Tulip781]

I've set up a demonstration on StackBlitz to showcase the problem. You can find it here:https://stackblitz.com/edit/nuxt-starter-6alb54?file=pages%2Findex.vue

 

Details of the Demo:

 

Project Structure: The demo consists of two project pages and an index page.

 

Observation: When you visit the project pages and then return to the home page, the ScrollTrigger animations do not activate as expected.

 

Additional Insight: Interestingly, if you go into the Nuxt Config and comment out the page transition setting, the ScrollTrigger then works correctly.

 

I suspect the problem lies in how the lifecycle hooks are managed alongside the transitions, possibly affecting the activation of the ScrollTrigger.

Any insights, especially regarding the interaction between GSAP's context, ScrollTrigger, and Vue's lifecycle within the Nuxt framework, would be immensely helpful. I'm looking forward to your thoughts and suggestions on how to resolve this inconsistency.

 

Thank you!

[Rodrigo]

Hi,

 

This is pretty much the same you posted here right?

If so, please let us know so we can delete that post in the other thread so we can focus here.

 

The problem here is that GSAP doesn't know when the route animation is complete. You have to wait until that to create your ScrollTrigger instances. Since you're using CSS transitions we have to resort to an ugly and not 100% reliable setTimeout() as you can see in this fork of your demo:

https://stackblitz.com/edit/nuxt-starter-nsofx8?file=pages%2Fprojects%2FprojectTwo.vue,pages%2Fprojects%2FprojectOne.vue

 

On top of that you had this on your code:

let ctx;

onMounted(() => {
  console.log('mounted');

  if (blockRefs.value) {
    console.log('here we go again', blockRefs.value, gsap);
    // Set things up
    // BIG ISSUE HERE!!!!
    const ctx = gsap.context(() => {
      const blocks = gsap.utils.toArray(blockRefs.value);
      gsap.set(blocks, { autoAlpha: 0, y: 50 });
      console.log(blocks);
      blocks.forEach((block) => {
        const anim = gsap.fromTo(
          block,
          { autoAlpha: 0, y: 50 },
          { duration: 0.5, autoAlpha: 1, y: 0, paused: true }
        );
        ScrollTrigger.create({
          trigger: block,
          end: 'bottom bottom',
          once: true,
          onEnter: (self) => {
            // If it's scrolled past, set the state
            // If it's scrolled to, play it
            self.progress === 1 ? anim.progress(1) : anim.play();
          },
        });
      });
    });
  }
});

You are creating a variable for the GSAP Context instance, but then in the scope of the onMounted hook you are creating a constant where you store the GSAP Context instance. Then in the onUnmount hook ctx is the variable outside the scope of the onMounted hook, so is undefined so nothing gets reverted. You have to assign ctx to something (a GSAP Context of course) in order to be able to revert it later when the route is unmounted.

 

In our original demo we use a Vue composable to know when the route animation is completed in order to create the ScrollTrigger instances then:

https://stackblitz.com/edit/nuxt-starter-bthjlg

 

Hopefully this helps.

Happy Tweening!

[Tulip781]

Hi Rodrigo, thank you for the help. And yes that is the same issue, so please feel free to remove that thanks. Do you think that it would be best to rely on GSAP for all my page animations if I am using ScrollTrigger in that case? I want a simple fade in on route change, so felt like it would be simpler to do with CSS. The benefit of using GSAP would be that I could use a composable to track when the transition is complete? In this example https://stackblitz.com/edit/nuxt-starter-bthjlg?file=pages%2Flayers.vue you use the composable to track state of the page animation at the page level. Is it possible to hook into this transition complete state at the component level? As this is where I would actually like to instantiate my scrolltriggers after the animation. Thanks for all the help.

[Rodrigo]

We are in the GSAP forums, so of course we don't use CSS transitions for anything around here! 😄

 

That's why our demo uses that composable. If the CSS animations work in your case and you don't run into any issues with the setTimeout() approach, then by all means use it if is more clear to you. We don't impose users how to create their apps, we try to guide as much as we can into what we believe are better practices, nothing more, but if something is not broken, there is no need to fix it, right?

 

In our demo we actually use a watcher on each route/page to check when the transition composable switches in order create the ScrollTrigger instances when the route transition is actually completed, you can check the logic in our demo.

 

Happy Tweening!

[Tulip781]

Thanks Rodrigo, appreciate you sharing this. Would it still be possible to use the transitionstate.transitioncomplete watcher inside a component instead of a page? I'm guessing this would only work if the component is only on pages with a gsap transition enabled?

[Rodrigo]

1 hour ago, Tulip781 said:

Thanks Rodrigo, appreciate you sharing this. Would it still be possible to use the transitionstate.transitioncomplete watcher inside a component instead of a page? I'm guessing this would only work if the component is only on pages with a gsap transition enabled?

Absolutely, you can use a watcher in any Vue file you want and write your code accordingly, I see no issue with that.

 

Happy Tweening!