gsap.registerPlugin doesn't work in my Nuxt 3 project

[Cyprian]

I have a problem with scroll triger when scrolling page, because my text "Animation" text not working animation and in my console is error: 

 

codesandbox: cyprianwaclaw/nuxt - CodeSandbox

See the Pen nuxt by s (@s) on CodePen

[Rodrigo]

Hi @Cyprian,

 

There are a couple of small issues.

 

The transpile property in the Nuxt Config file should be in the build configuration, not directly on the nuxt config object:

build: {
  transpile: ["gsap"]
}

The markers config option is part of ScrollTrigger not the global vars object:

// Wrong config
gsap.to(animation.value, {
  scrollTrigger: {
    trigger:smoothscroll.value,
    scrub: true,
    start: "top bottom",
    end: "top top",
  },
  x: 200,
  markers: true,
  y:20,
  scaleX: 0,
  ease: "none"
});

// Right config
gsap.to(animation.value, {
  scrollTrigger: {
    trigger:smoothscroll.value,
    scrub: true,
    start: "top bottom",
    end: "top top",
    markers: true, // <- HERE
  },
  x: 200,
  y:20,
  scaleX: 0,
  ease: "none"
});

Also is worth noticing that you have some other issues in your Nuxt config, it seems that you are not configuring the plugins correctly.

[Vue warn]: A plugin must either be a function or an object with an "install" function.

 

Happy Tweening!

[Cyprian]

I've made changes, but the scrolling animation still doesn't work

[Cyprian]

You can see changes in my codesandbox: cyprianwaclaw/nuxt - CodeSandbox

[GreenSock]

It looks like you're using LocomotiveScroll which is not a GreenSock product, so we really can't offer support for that here. I'd recommend switching to ScrollSmoother (but of course that's only available to Club GreenSock members). If you want to use LocomotiveScroll, that's fine but I'd recommend just getting that working by itself in your demo first (ignore ScrollTrigger for now). Just get something scrolling first. THEN once you've got your scroll smoothing working, THEN work on ScrollTrigger-related stuff. Good luck!