this.$gsap unknown in document.addEventListener

[pit07]

Hi!

I have an issue with this.$gsap on Nuxt.
It's unknow when i use it on a document.addEventListener, or in a OnRepeat:

 mounted(){
      const cursor = document.querySelector('.cursor')
      const follower = document.querySelector('.cursor-follower')
      document.addEventListener("mousemove", function(e, this.$gsap) {
        this.$gsap.to(cursor,{
          x: e.pageX,
          y: e.pageY
        })
      })

=> Uncaught TypeError: Cannot read properties of undefined (reading 'to')

I tried this too (based on https://codepen.io/karlovidek/pen/yvxZjO):

mounted(){
  this.$gsap.to({}, 0.016, {
        repeat: -1,
        onRepeat: function() {
          posX += (mouseX - posX) / 9;
          posY += (mouseY - posY) / 9;

          this.$gsap.set(follower, {
              css: {
              left: posX - 12,
              top: posY - 12
              }
          });

          this.$gsap.set(cursor, {
              css: {
              left: mouseX,
              top: mouseY
              }
          });
        }
      });
 }

And the this.$gsap on the OnRepeat function is undefined (=> Uncaught TypeError: Cannot read properties of undefined (reading 'set')

Thanks a lot!
Vincent

[ivodolenc]

Hi, the module works fine, here is an example for mouse animation.

When using events in vue/nuxt, the best practice is to add them in the mounted hook and remove them in the destroy hook to avoid possible issues later in the dev.

Also keep in mind that you will need some kind of raf or gsap.ticker for better performance.

<template>
  <div>
    <div ref="cursor">Cursor</div>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.mouseMounted()
    },

    beforeDestroy() {
      this.mouseDestroyed()
    },

    methods: {
      cursorAnimation(e) {
        this.$gsap.to(this.$refs.cursor, {
          x: e.pageX,
          y: e.pageY,
        })
      },

      mouseMounted(e) {
        document.addEventListener('mousemove', this.cursorAnimation)
      },

      mouseDestroyed(e) {
        document.removeEventListener('mousemove', this.cursorAnimation)
      },
    },
  }
</script>