Блог

Я использую GSAP ScrollTrigger и LocomotiveScroll в приложении Nuxt. Пока все работает нормально, за исключением смены маршрутов. Я думаю, мне нужно отключить и повторно инициализировать LocomotiveScroll и ScrollTrigger?

Соответствующие JS:

 export default {
  data() {
    return {
      lmS: null
    };
  },

  mounted() {
    this.lmS = new this.locomotiveScroll({
      el: document.querySelector(".js-scroll"),
      smooth: true,
      direction: "horizontal",
      lerp: 0.1,
      smartphone: {
        smooth: false,
        direction: "vertical"
      }
    });

    //////////////////SCROLLTRIGGER SETUP//////////////////

    this.lmS.on("scroll", this.$ScrollTrigger.update);

    var that = this;

    this.$ScrollTrigger.scrollerProxy(".js-scroll", {
      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(".js-scroll").style.transform
        ? "transform"
        : "fixed"
    });

    this.$ScrollTrigger.addEventListener("refresh", () => this.lmS.update());
    this.$ScrollTrigger.refresh(true);
  },

  destroyed() {
    //window.removeEventListener("refresh", () => this.lmS.update());
    //let triggers = this.$ScrollTrigger.getAll();
    //triggers.forEach((trigger) => {
    //trigger.kill(false, true);
    //});
    this.lmS.destroy();
    this.lmS = null;
  }
};

 

Я настроил минимальный кодовый ящик:
https://codesandbox.io/s/scrolltrigger-routechange-gv75r?file=/mixins/locomotive.js

Буду признателен за любые советы! 🙂

Обновлено JS:

 export default {
  data() {
    return {
      sTrigger: null
      lmS: null
    };
  },

  mounted() {
    this.lmS = new this.locomotiveScroll({
      el: document.querySelector(".js-scroll"),
      smooth: true,
      direction: "horizontal",
      lerp: 0.1,
      smartphone: {
        smooth: false,
        direction: "vertical"
      }
    });

    //////////////////SCROLLTRIGGER SETUP//////////////////
    this.sTrigger = this.$ScrollTrigger

    this.lmS.on("scroll", this.sTrigger.update);

    var that = this;

    this.sTrigger.scrollerProxy(".js-scroll", {
      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(".js-scroll").style.transform
        ? "transform"
        : "fixed"
    });

    this.sTrigger.addEventListener("refresh", () => this.lmS.update());
    this.sTrigger.refresh(true);
  },

  beforeDestroy(){
    window.removeEventListener('refresh', () => this.lmS.update())
    let triggers = this.sTrigger.getAll()
      triggers.forEach(trigger => {
        trigger.kill()
      })
    this.sTrigger = null
  },

  destroyed() {
    this.lmS.destroy();
    this.lmS = null;
  }
};