如何在 nuxt 项目中添加 ScrollMagic？

Question

我正在尝试在我的 Nuxt 项目中添加 ScollMagic，我关注了这篇文章：https://nuxtjs.org/guide/plugins 并且我在 nuxt.config.js 中添加了 ScrollMagic.js，我遇到了这个问题：ReferenceError 窗口未定义。

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

Answer 1

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

编辑：另外，通过这种方式，您可以将任何插件注册到 nuxt :)。

所以我做了什么：

1。 npm i scrollmagic

1. 转到 nuxt.config.js 并将以下内容添加到您的插件部分：

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

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

1. 转到plugins 文件夹，或将其放入根文件夹并创建一个名为ScrollMagic.js 的新文件。在这里添加以下内容：

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

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

这个 sn-p 将使变量 $scrollmagic 在每个组件/页面中可用。您可以拨打this.$scrollmagic 使用它。例如const controller = new this.$scrollmagic.Controller();

希望这对任何人都有帮助。

Answer 2

目前可行的是使用 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)
  }
}}

您可以通过使用 npm 或 [puglin] 将此方法用于无法在 nuxt 上运行的其他 puglin

Answer 3

这是在回答 Drew Baker。

我认为你让它变得比它应该的更复杂。将 GSAP 与 Nuxt 结合使用相当简单。

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

如果您仍想使用我在另一条评论中解释的 GSAP：

1. 按照另一个 comment 的步骤 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！

Answer 4

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

Answer 5

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