Jump to content
Search Community

Nuxt.js - ScrollTrigger

LX45 test
Moderator Tag

Recommended Posts

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?

Link to comment
Share on other sites

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?
 
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 

Screenshot 1.png

Link to comment
Share on other sites

  • 4 months later...

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

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...