How add ScrollMagic in nuxt project?

Question

I am trying to add ScollMagic in my Nuxt project, I followed this article: https://nuxtjs.org/guide/plugins & I've added ScrollMagic.js in nuxt.config.js and I got this issue: ReferenceError window is not defined.

module.exports = {
 plugins: [
    { src: '~plugins/ScrollMagic', mode: 'client' }
  ],
}

Then I've added this snippet in my component:
import ScrollMagic from 'scrollmagic'

I still have this issue...

Even if cover it like this:

if (process.client) {
  Vue.use(ScrollMagic)
}

Answer 1

This is answering Drew Baker.

I think you are making it more complicated than it should be. Using GSAP with Nuxt is fairly simple.

1. npm install gsap in your terminal.
2. In the file you want to animate something, import gsap. In the script tag: import { gsap } from 'gsap'.
3. use GSAP like you're used too. const lt = gsap.timeline();.

If you still want to use GSAP as I explained in the other comment:

1. Follow the steps 1 & 2 from the other comment.
2. In step 3 of the previous comment, create a file called 'gsap.js' in there import Vue and GSAP.

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

Object.defineProperty(Vue.prototype, '$gsap', { value: gsap });

Hope this helps you @Drew Baker!