正确调用包含的函数

Question

我将

nuxt-locomotive-scroll

与

gsap

一起使用并收到以下错误。

_this.elementAnimation 不是函数

如何正确调用

elementAnimation()

中包含的

initScrolltrigger()

函数

export default {
  mounted() {
    this.initScrolltrigger()


// How can I call this.elementAnimation(element)?
    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',
          })
        },
      })
    },
  },
}

Answer 1

您的

elementAnimation

函数实际上嵌套在

initScrolltrigger

（和

ScrollTrigger.scrollerProxy

）中，不确定这是需要的。

如果您正在寻找更新，您可能应该以不同的方式观察这里的更改。