Nuxt.js - ScrollTrigger

[LX45 1 Likes (Newbie)]

Hi, 

 

I wanted to use the ScrollTrigger Plugin in my Nuxt Application but somehow it does not work, can someone help me?

 

I attached my config, js, and component file.

 

[Cassie 5,088 Likes (Superhero)]

It's hard to see what the issue could be from these screenshots. Could you possibly put a minimal demo together, or explain the issue more clearly?

[nico fonseca 518 Likes (Leader)]

Hey @LX45 !
As @Cassie mentioned it is important for us that you create a minimal demo to try to solve your issue.
 

Btw recently there was a thread about Nuxt and ScrollTrigger.

 

[LX45 1 Likes (Newbie)]

24 minutes ago, nicofonseca said:

Hey @LX45 !
As @Cassie mentioned it is important for us that you create a minimal demo to try to solve your issue.
 

Btw recently there was a thread about Nuxt and ScrollTrigger.

Thank you for the reply. I initiale just integrated the cdn. Now I installed gsap via npm.

But now I get the error gsap is not defined. 

 

Even though I Integrated it in my nuxt.config file 

 

build: {

transpile: ["gsap"]

},

 

plugins: [

{ src: "~/plugins/gsap", ssr: true}

],

 

and the gsap.js file in the plugin folder looks like this 

import { gsap } from "gsap";

import { ScrollTrigger } from "gsap/ScrollTrigger";

 

if (process.client) {

gsap.registerPlugin(ScrollTrigger);

}

 

Did I miss something?

[OSUblake 18,473 Likes (Superhero)]

What is the purpose of this file?

plugins: [
{ src: "~/plugins/gsap", ssr: true}
],

 

Whatever it is, it should not be ssr.

 

If you need help, can you make a minimal demo using our Nuxt starter template.

https://codesandbox.io/s/gsap-nuxt-starter-r5lkg?file=/pages/index.vue

 

[LX45 1 Likes (Newbie)]

8 minutes ago, OSUblake said:

What is the purpose of this file?

plugins: [
{ src: "~/plugins/gsap", ssr: true}
],

 

Whatever it is, it should not be ssr.

 

If you need help, can you make a minimal demo using our Nuxt starter template.

https://codesandbox.io/s/gsap-nuxt-starter-r5lkg?file=/pages/index.vue

 

In this file I import the plugins.

import { gsap } from "gsap";

import { ScrollTrigger } from "gsap/ScrollTrigger";

 

if (process.client) {

gsap.registerPlugin(ScrollTrigger);

}

 

Where should I import them if not in this file?

 

[OSUblake 18,473 Likes (Superhero)]

Look at the template I linked to. You import in every file you plan on using GSAP and related plugins.

[LX45 1 Likes (Newbie)]

6 minutes ago, OSUblake said:

Look at the template I linked to. You import in every file you plan on using GSAP and related plugins.

If I do it like this I get the Error Gsap is not defined.

 

But If i look in my node_modules folder i can see the gsap folder?

[LX45 1 Likes (Newbie)]

21 minutes ago, OSUblake said:

Look at the template I linked to. You import in every file you plan on using GSAP and related plugins.

Okay, now its working, the normal Gsap Animations work fine. Thank your for your help.

 

But now I'm having another issue, the scrollTrigger animation within a component isn't working, I do not get an error message, it's just not working.

I attached the component file 

[OSUblake 18,473 Likes (Superhero)]

Please fork the template I provided. It's too hard to tell what's going on from a code snippet.

 

[Born05 5 Likes (Newbie)]

For future reference, importing in every file isn't necessarily needed. The plugin approach was in the right direction, but you need to use the gsap instance you created there everywhere in your app.

Example in a nuxt app: plugins/gsap.js

import Vue from 'vue';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

const GSAP = {
  install(Vue, options) {
    Vue.prototype.$gsap = gsap;
    Vue.prototype.$ScrollTrigger = ScrollTrigger;
  },
};

Vue.use(GSAP);

Everywhere in your nuxt app use gsap as following (referencing this.$gsap): 

this.$gsap.to(this.$refs.exampleElement, {
  duration: 1,
  x: 50,
  scrollTrigger: { /* scrolltrigger stuff */ }
});

Same goes for this.$ScrollTrigger.refresh() instead of ScrollTrigger.refresh()

[thunderfoot 3 Likes (Newbie)]

Hey @Born05, please install this. https://www.npmjs.com/package/nuxt-gsap-module