nuxt-locomotive-scroll搭配gsap调用elementAnimation报not a function如何解决

elementAnimation 函数当前定义在 ScrollTrigger.scrollerProxy() 的配置对象内部，不属于Vue实例的方法，因此通过 this.elementAnimation 调用时会提示不存在该函数。

将elementAnimation抽离为独立的Vue实例方法即可正常调用，修改后完整代码如下：

export default {
  mounted() {
    this.initScrolltrigger()
    this.$nextTick(() => {
      const elements = document.querySelectorAll('[data-scroll-trigger]')
      elements.forEach((element) => this.elementAnimation(element))
    })
  },

  methods: {
    initScrolltrigger() {
      const locomotive = this.$refs.scroller.locomotive
      locomotive.on('scroll', ScrollTrigger.update)
      ScrollTrigger.scrollerProxy(locomotive.el, {
        scrollTop(value) {
          return arguments.length
            ? locomotive.scrollTo(value, 0, 0)
            : locomotive.scroll.instance.scroll.y
        },
        getBoundingClientRect() {
          return {
            top: 0,
            left: 0,
            width: window.innerWidth,
            height: window.innerHeight,
          }
        }
      })
    },
    // 抽离为实例方法
    elementAnimation(element) {
      gsap.from(element, {
        scrollTrigger: {
          trigger: element,
          scroller: this.$refs.scroller.locomotive.el,
          scrub: true,
          markers: true,
          start: 'top top',
          end: 'bottom center',
        },
        scale: 0,
        ease: 'none',
      })
    }
  },
}

如果后续需要在scrollerProxy的配置项内部调用该方法，只需要在initScrolltrigger方法开头提前保存Vue实例指向即可：

initScrolltrigger() {
  const vm = this
  const locomotive = this.$refs.scroller.locomotive
  // 后续在scrollerProxy内部任意位置调用都可以用 vm.elementAnimation(参数)
}

内容的提问来源于stack exchange，提问作者Philippe