title: How to correctly kill off and reinitialize ScrollTrigger? (Nuxt + LocomotiveScroll)
body: <p>I'm using GSAP ScrollTrigger and LocomotiveScroll in a Nuxt application. Everything is working fine so far, except when changing routes.
  I guess, I have to kill off and reinitialize LocomotiveScroll <strong>and</strong> ScrollTrigger?</p>
  <p>The relevant JS:</p>
  <pre><code>export default {
    data() {
      return {
        lmS: null
      };
    },
  
    mounted() {
      this.lmS = new this.locomotiveScroll({
        el: document.querySelector(&quot;.js-scroll&quot;),
        smooth: true,
        direction: &quot;horizontal&quot;,
        lerp: 0.1,
        smartphone: {
          smooth: false,
          direction: &quot;vertical&quot;
        }
      });
  
      //////////////////SCROLLTRIGGER SETUP//////////////////
  
      this.lmS.on(&quot;scroll&quot;, this.$ScrollTrigger.update);
  
      var that = this;
  
      this.$ScrollTrigger.scrollerProxy(&quot;.js-scroll&quot;, {
        scrollTop(value) {
          return arguments.length
            ? that.lmS.scrollTo(value, 0, 0)
            : that.lmS.scroll.instance.scroll.y;
        },
        scrollLeft(value) {
          return arguments.length
            ? that.lmS.scrollTo(value, 0, 0)
            : that.lmS.scroll.instance.scroll.x;
        },
        getBoundingClientRect() {
          return {
            top: 0,
            left: 0,
            width: window.innerWidth,
            height: window.innerHeight
          };
        },
        pinType: document.querySelector(&quot;.js-scroll&quot;).style.transform
          ? &quot;transform&quot;
          : &quot;fixed&quot;
      });
  
      this.$ScrollTrigger.addEventListener(&quot;refresh&quot;, () =&gt; this.lmS.update());
      this.$ScrollTrigger.refresh(true);
    },
  
    destroyed() {
      //window.removeEventListener(&quot;refresh&quot;, () =&gt; this.lmS.update());
      //let triggers = this.$ScrollTrigger.getAll();
      //triggers.forEach((trigger) =&gt; {
      //trigger.kill(false, true);
      //});
      this.lmS.destroy();
      this.lmS = null;
    }
  };
  
  </code></pre>
  <p>I’ve set up a minimal codesandbox:
  <a href="https://codesandbox.io/s/scrolltrigger-routechange-gv75r?file=/mixins/locomotive.js" rel="nofollow noreferrer">https://codesandbox.io/s/scrolltrigger-routechange-gv75r?file=/mixins/locomotive.js</a></p>
  <p>Would appreciate any tips! :)</p>
  <hr />
  <p><strong>Updated JS:</strong></p>
  <pre><code>export default {
    data() {
      return {
        sTrigger: null
        lmS: null
      };
    },
  
    mounted() {
      this.lmS = new this.locomotiveScroll({
        el: document.querySelector(&quot;.js-scroll&quot;),
        smooth: true,
        direction: &quot;horizontal&quot;,
        lerp: 0.1,
        smartphone: {
          smooth: false,
          direction: &quot;vertical&quot;
        }
      });
  
      //////////////////SCROLLTRIGGER SETUP//////////////////
      this.sTrigger = this.$ScrollTrigger
  
      this.lmS.on(&quot;scroll&quot;, this.sTrigger.update);
  
      var that = this;
  
      this.sTrigger.scrollerProxy(&quot;.js-scroll&quot;, {
        scrollTop(value) {
          return arguments.length
            ? that.lmS.scrollTo(value, 0, 0)
            : that.lmS.scroll.instance.scroll.y;
        },
        scrollLeft(value) {
          return arguments.length
            ? that.lmS.scrollTo(value, 0, 0)
            : that.lmS.scroll.instance.scroll.x;
        },
        getBoundingClientRect() {
          return {
            top: 0,
            left: 0,
            width: window.innerWidth,
            height: window.innerHeight
          };
        },
        pinType: document.querySelector(&quot;.js-scroll&quot;).style.transform
          ? &quot;transform&quot;
          : &quot;fixed&quot;
      });
  
      this.sTrigger.addEventListener(&quot;refresh&quot;, () =&gt; this.lmS.update());
      this.sTrigger.refresh(true);
    },
  
    beforeDestroy(){
      window.removeEventListener('refresh', () =&gt; this.lmS.update())
      let triggers = this.sTrigger.getAll()
        triggers.forEach(trigger =&gt; {
          trigger.kill()
        })
      this.sTrigger = null
    },
  
    destroyed() {
      this.lmS.destroy();
      this.lmS = null;
    }
  };
  
  </code></pre>