如何在 nuxt 项目中添加 ScrollMagic？

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

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

2. 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.

3. 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.

Answer 2

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]

Answer 3

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!

Answer 4

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

Answer 5

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