ScrollTrigger and Page Navigation conflicts, .kill . refresh (?) about nuxt-gsap

[ivodolenc]

Hi, please create a minimal reproduction because it's difficult to understand what's the problem (just kidding it takes to much time to debug it 😂)

Many questions require ready-made solutions, copy paste answers or real support like "How to...". If the package is useful to you, before you ask for help, at least it's nice to leave the star 😉 Just saying

this.animateOnScroll.scrollTrigger.kill()

Also, I see you are adding the GSAP .kill() method to the vue method and that's one of the reasons why this won't work.

P.S: The inject("ScrollTrigger", ScrollTrigger); they talk about is not needed now that it exist this module, right?

I don't understand this part. If you using nuxt-gsap-module just follow docs.

After activation, plugins are automatically registered and available globally, so you won’t have to worry about it (applies to all plugins).

From example above, you need:

// GSAP core
const gsap = this.$gsap

// GSAP timeline
const tl = this.$gsap.timeline

// ScrollTrigger
const ScrollTrigger = this.$ScrollTrigger

Anyway, like I said create a minimal repo so I can easily check what it’s all about.

[ivodolenc]

Simple example with .getById() and .kill() methods:

<template>
  <div>
    <nuxt-link to="/about">About</nuxt-link>
    <section style="height: 150vh"></section>
    <h1 class="title">Nuxt GSAP Module</h1>
    <section style="height: 150vh"></section>
  </div>
</template>

<script>
  export default {
    methods: {
      customScrollTrigger() {
        this.$gsap.to('.title', {
          scrollTrigger: {
            id: 'title01', // Add unique Id
            trigger: '.title',
            start: 'center bottom',
            end: 'center top',
            scrub: true,
            markers: true
          },
          x: 500
        })
      }
    },

    mounted() {
      this.customScrollTrigger()
    },

    beforeDestroy() {
      // Returns the ScrollTrigger with unique Id
      // and kills it before route change
      this.$ScrollTrigger.getById('title01').kill()
    }
  }
</script>

[esadrian]

Hi! I managed to get the beforeDestroy() hook right, thanks a lot for your response, couldn't find the right answer anywhere.
Is there a way to select every scrollTrigger and animation to kill it?
Something like scrollTrigger.getAll().forEach((t) => t.kill()); that I found earlier.

---

Second, If you see this example bellow, when you get back to the main page, the first trigger is few pixels bellow its possition. Is this normal? Do I have to add a .refresh or something?

https://codesandbox.io/s/example-for-navigation-dxglh?file=/pages/index.vue

[ivodolenc]

Please read the docs and ask for support on official forums. Closing this because there is no issues with the module.

[ivodolenc]

See comment

[woutercouvaras]

For others that encounter a seemingly similar problem, here's an additional thing to check for (which has cost me HOURS).

I was using $fetch to fetch data and even though I was killing scroll trigger instances, things would only work on the intial page load and not again after that, no matter what I tried.

Try using asyncData, instead of fetch, as it solved what loooked like a weird navigation/state/mem leak related issue for me.