Nuxt 与 LocomotiveScroll 和 Gsap

我一直在努力实施机车卷轴 https://github.com/locomotivemtl/locomotive-scroll and Gsap https://greensock.com/gsap/进入 Nuxt 项目。我认为这与 DOM 和 SSR 有关。我检查了从scrollproxy Gsap到Nuxt和locomotive的所有文档，但我没有更多线索。

如果大家有任何建议，非常欢迎帮助。感谢您的时间。

这是错误

类型错误：无法读取未定义的属性“滚动”
未捕获的类型错误：_triggers[_i].update 不是函数
未捕获的类型错误：无法读取未定义的属性“匹配”

在plugins/locomotive.js中创建

import Vue from "vue";
import locomotiveScroll from "locomotive-scroll";

Object.defineProperty(Vue.prototype, "locomotiveScroll", {
  value: locomotiveScroll
});

在 nuxt.config.js 中配置

css: [
  //smooth scroll
  '@/assets/css/scroll.css',
],
plugins: [
  {
    src: "~/plugins/locomotive.js",
    mode: "client"
  }
],

添加到app.vue中

<script>
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
import LocomotiveScroll from "locomotive-scroll"
</script>

在app.vue的mounted钩子中触发

this.locoScroll = new LocomotiveScroll({
  el: document.querySelector('.smooth-scroll'),
  smooth: true,
})

this.locoScroll.on('scroll', ScrollTrigger.update)

ScrollTrigger.scrollerProxy('.smooth-scroll', {
  scrollTop(value) {
    return arguments.length
      ? this.locoScroll.scrollTo(value, 0, 0)
      : this.locoScroll.scroll.instance.scroll.y
  },
  getBoundingClientRect() {
    return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }
  },
  pinType: document.querySelector('.smooth-scroll').style.transform ? 'transform' : 'fixed',
})

ScrollTrigger.addEventListener('refresh', () => this.locoScroll.update())
ScrollTrigger.refresh()

尝试一次专注于一个问题：

• 您在 GSAP 上遇到什么困难？你试过这个吗nuxt-gSAP https://github.com/ivodolenc/nuxt-gsap-module#readme模块 ？在我这边工作得非常好。滚动触发 https://github.com/ivodolenc/nuxt-gsap-module#scrolltrigger在那里可用。
• 我不知道你为什么使用app.vue for 机车卷轴 https://github.com/locomotivemtl/locomotive-scroll但您可能应该尝试简单的最基本的用例page or component并将其以默认布局 IMO 的最大值插入。然后，您也许可以考虑对其进行优化。

如果您成功安装了 GSAP 并且遇到了困难locomotive-scroll，您也许可以在 Codesandbox 上制作一个托管示例。但如果你不想太费心，你可以寻找一些 Vuejs视差包 https://github.com/vuejs/awesome-vue#parallax，如果 GSAP 不够，您可能会找到适合您的东西。