如何在Nuxt项目中添加ScrollMagic？

Question

我正在尝试将ScollMagic添加到我的Nuxt项目中，我按照这篇文章的步骤进行操作：https://nuxtjs.org/guide/plugins，并在nuxt.config.js中添加了ScrollMagic.js，但是遇到了如下问题：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'

我还有这个问题...

即使像这样覆盖它：

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

- Alrick

---

读一下我之前回答那个问题的内容，可能对你有帮助。 https://stackoverflow.com/questions/48025984/use-gsap-with-nuxtjs/54883237#54883237 - Vlad

Answer 1

我知道这个问题有点老了，但也许有人会发现我的解决方案很有帮助。

编辑：此外，您可以向nuxt注册任何插件 :）。

所以我做了什么：

1. npm i scrollmagic

2. 转到nuxt.config.js并在plugins部分中添加以下内容：

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

这将确保scrollmagic仅在客户端中包含。这可以防止window undefined错误。

3. 进入插件文件夹，或在根文件夹中创建一个名为ScrollMagic.js的新文件。在此处添加以下内容：

import Vue from 'vue';
import * as ScrollMagic from 'scrollmagic';

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

这段代码将会让变量 $scrollmagic 在每个组件/页面中都可以使用。你可以调用 this.$scrollmagic 来使用它。例如：const controller = new this.$scrollmagic.Controller();

希望这能帮到大家。

- RikLamers

---

这就是我正在寻找的答案。我已经学会了如何使用这些说明注册插件。谢谢Rik。 - Richard-MX

那么使用TweenMax呢？或者addIndicators插件呢？ - Drew Baker

@DrewBaker 我在这里回答了你的问题（链接：https://dev59.com/v7bna4cB1Zd3GeqPhtYp#64090587）。 - RikLamers

@RikLamers，你有没有想法如何在你的答案上方添加Scroll Magic指示器？ - Seno

@Seno 嗯，我没有使用过这个插件的经验，但我认为你可以直接在脚本中导入插件，并按照文档中提到的方式使用它：var controller = new ScrollMagic.Controller({addIndicators: true});。 - RikLamers

Answer 2

这是回答Drew Baker的问题。

我认为你把它弄得比应该的更复杂了。在Nuxt中使用GSAP相当简单。

1. 在终端中输入npm install gsap。
2. 在要动画的文件中，导入gsap。在script标签中：import { gsap } from 'gsap'。
3. 像以前一样使用GSAP。const lt = gsap.timeline();。

如果您仍然想按照我在其他评论中解释的方式使用GSAP：

1. 按照其他评论中的步骤1和2。
2. 在上一个评论的第3步中，在那里创建一个名为'gsap.js'的文件，导入Vue和GSAP。

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

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

希望这能帮到你，@Drew Baker！

- RikLamers

---

不错的 defineProperty 语法。谢谢！ - Snsxn

Answer 3

使用CDN并在'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,
  },
] },

在组件中

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

Answer 4

目前可行的方法是使用CDN并在'nuxt.config.js'中进行集成。像这样：

      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,
  },
] },

在组件中：

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

您可以使用此方法来处理其他插件，这些插件在nuxt上无法正常工作，只需使用npm或[puglins]即可。

- ronael

Answer 5

对于 Vue / Nuxt 项目，您可以使用 vue-scrollmagic 插件。

- zhrivodkin