Call included function correctly

Question

I'm using nuxt-locomotive-scroll with gsap and get following error.

_this.elementAnimation is not a function

How can I correctly call the elementAnimation() function which is included in 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

Your elementAnimation function is actually nested into initScrolltrigger (and ScrollTrigger.scrollerProxy), not sure this is wanted.

You should probably watch the changes a bit differently here if you're looking for an update.