4

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)
}
Alrick
  • 91
  • 2
  • 10
  • Read my old answer for that question, it can be helpful for you. https://stackoverflow.com/questions/48025984/use-gsap-with-nuxtjs/54883237#54883237 – Vlad Oct 11 '19 at 14:05

5 Answers5

15

I know this question is a bit old, but maybe someone will find my sulotion helpfull.

EDIT: Also, this way you can register any plugin to nuxt :).

So what I did:

1. npm i scrollmagic

  1. Go to nuxt.config.js and add the following to your plugins section:

{ src: '~/plugins/ScrollMagic.js', mode: 'client' }

This will make sure that scrollmagic will only be included in the client. This prevents the window undefined error.

  1. Go to the plugins folder, or make it in your root folder and make a new file called ScrollMagic.js. In here add the following:
import Vue from 'vue';
import * as ScrollMagic from 'scrollmagic';

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

This snippet will make the variable $scrollmagic available in every component/page. You can call this.$scrollmagic to use it. For example const controller = new this.$scrollmagic.Controller();

Hope this helps anyone.

RikLamers
  • 421
  • 4
  • 10
  • This was the answer as was looking for. I've learned how to register plugins with those instructions. Thanks Rik. – Richard-MX Apr 18 '20 at 20:47
  • And how about using TweenMax with this way? Or the addIndicators plugin? – Drew Baker Sep 26 '20 at 12:57
  • @DrewBaker I've answered your question [here](https://stackoverflow.com/a/64090587/7847581). – RikLamers Sep 27 '20 at 16:12
  • @RikLamers any idea on how to add [Scroll Magic's indicator](https://scrollmagic.io/docs/debug.addIndicators.html) on top of your answer? – Seno Nov 15 '21 at 07:39
  • @Seno Well I don't have any experience with the plugin but I would assume you can import the plugin directly in the script and use it as mentioned on the docs: `var controller = new ScrollMagic.Controller({addIndicators: true});`. – RikLamers Nov 15 '21 at 17:57
2

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!

RikLamers
  • 421
  • 4
  • 10
1

currently what works is to use the cdn and integrate in 'nuxt.config.js'. Like this :

      head: {
...
script: [
  {
    src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js",
    async: 'async',
    ssr: false,
    defer: true,
    body: true,
  },
  {
    src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js",
    async: 'async',
    ssr: false,
    defer: true,
    body: true,
  },
] },

in the component :

export default {
mounted () {
  if (process.client) {
    var controller = new ScrollMagic.Controller()
    var scene = new ScrollMagic.Scene({ triggerElement: '#trigger1' })

      // exemple : trigger animation by adding a css class

      .setClassToggle('#animate1', 'zap')
      .addIndicators({ name: '1 - add a class' }) // add indicators (requires plugin)
      .addTo(controller)
  }
}}

you can use this method for other puglins that wouldn't work on nuxt by using npm or [puglins]

ronael
  • 11
  • 2
1

use the cdn and integrate in 'nuxt.config.js'.

script: [
  {
    src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js",
    async: 'async',
    ssr: false,
    defer: true,
    body: true,
  },
  {
    src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js",
    async: 'async',
    ssr: false,
    defer: true,
    body: true,
  },
 {
    src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js",
    async: 'async',
    ssr: false,
    defer: true,
    body: true,
  },
] },

In component

Anim() {
    if (process.browser && window) {
      const ScrollMagic = window.ScrollMagic;
      const bookTimeline = new TimelineMax({});
      bookTimeline
        .from(".hmbookservice-container", 0.6, {
          yPercent: 20,
          opacity: 0,
          ease: Power4.easeOut,
          clearProps: "all"
        })
        .from(
          ".hmservice-textwrap h4",
          0.6,
          {
            xPercent: 20,
            opacity: 0,
            ease: Power4.easeOut,
            clearProps: "all"
          },
          "-=.1"
        )
        .from(
          ".hmservice-btnwrap",
          0.6,
          {
            xPercent: 20,
            opacity: 0,
            ease: Power4.easeOut,
            clearProps: "all"
          },
          "-=.2"
        );

      const bookController = new ScrollMagic.Controller();
      const bookAnimScene = new ScrollMagic.Scene({
        triggerElement: ".hmbookservice-container",
        reverse: false,
        offset: -200
      })
        .setTween(bookTimeline)
        .addTo(bookController);
    }
  }
  mounted() {
    if (process.browser && window) {
      this.Anim();
    }
  }
MD.ALIMUL Alrazy
  • 330
  • 1
  • 7
  • 17
0

For Vue / Nuxt projects you can use vue-scrollmagic plugin.

zhrivodkin
  • 71
  • 1
  • 6