GSAP with Nuxt: this.$gsap unknown in document.addEventListener

[Vincent07 1 Likes (Newbie)]

Hi everybody!

 

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

 

 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:

 

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')

 

Any ideas?

Thanks a lot!

 

(i'm trying to use this : 😞

See the Pen yvxZjO by karlovidek (@karlovidek) on CodePen

[Rodrigo 5,377 Likes (Superhero)]

Hi @Vincent07 and welcome to the GreenSock forums!

 

It seems to me that you're using the syntax for accessing some Nuxt/GSAP plugin. Are you 100% sure that you installed the plugin and added it to your Nuxt config file?

 

Normally in Vue/Nuxt you have to import GSAP into your files, but if you want to avoid that you can follow the instructions @iotron shared in this thread:

 

Finally if you keep having issues please fork this Nuxt3 starter template in order to show us the problems you're having:

https://stackblitz.com/edit/nuxt-starter-khrgsj

 

Hopefully this helps.

Happy Tweening!

[Vincent07 1 Likes (Newbie)]

Hi @Rodrigo

 

46 minutes ago, Rodrigo said:

It seems to me that you're using the syntax for accessing some Nuxt/GSAP plugin. Are you 100% sure that you installed the plugin and added it to your Nuxt config file?

 

No no, i'm just using the .set() and to.(), no plugin, in a Nuxt v2 application.

I saw TweenMax was deprecied, so i tried to adapt this codepen with gsap.

 

I'm just trying to follow the mouse, but I'm not very good at it 😅

[Rodrigo 5,377 Likes (Superhero)]

Hi,

 

In that case you have to import GSAP on your script tags.

 

Here is a Nuxt2 & GSAP starter that you can follow  to avoid that error. Just don't use this.$gsap on your script and it should be fine:

https://stackblitz.com/edit/nuxt-starter-xvx9ux?file=README.md

 

As for he mouse follow part of it, use quickTo():

https://greensock.com/docs/v3/GSAP/gsap.quickTo()

 

Hopefully this helps.

Happy Tweening!

[Vincent07 1 Likes (Newbie)]

Oh thanks a lot!

I'll look into it, thanks a lot!

 

Edit : it's perfect, thanks a lot @Rodrigo !

[Vincent07 1 Likes (Newbie)]

Oh thanks a lot!

I'll look into it, thanks a lot

 

Edit : it's perfect, thanks a lot @Rodrigo !