Question

我已经包含了scrollmagic NPM包，并且从ScrollMagic文档中我得到了它;

“要访问此扩展程序，请包括插件/ debug.addIndicators.js。“

如何将指标加载到我的项目中？

这是我的代码：

import ScrollMagic from 'scrollmagic'

var controller = new ScrollMagic.Controller()
var scene = new ScrollMagic.Scene({/*ScrollMagic code inside here*/})
    .addIndicators({name: "Animation trigger"})
    .addTo(controller)

Answer 1

请将此部分添加到您的webpack.config.js

 resolve: {
    alias: {
        "TweenLite": path.resolve('node_modules', 'gsap/src/uncompressed/TweenLite.js'),
        "TweenMax": path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'),
        "TimelineLite": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'),
        "TimelineMax": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'),
        "ScrollMagic": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'),
        "animation.gsap": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'),
        "debug.addIndicators": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js')
    },
  },

然后在你的 js 文件中使用它：

import ScrollMagic from "scrollmagic/scrollmagic/uncompressed/ScrollMagic";
import "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap";
import "scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators";
import TweenMax from "gsap/src/uncompressed/TweenMax";
import TimelineMax from "gsap/src/uncompressed/TimelineMax";

您可以在此处找到更多信息 -> https://www.grzegorowski.com/scrollmagic-setup-for-webpack-commonjs

附言我做到了，现在可以用了。

更新： 上述解决方案适用于旧版本的 GSAP。对于新版本 3+，您可以在这里找到不错的信息 -> https://greensock.com/forums/topic/20434-react-gsap-scrollmagic-animationgsap-not-found/

我使用 ScrollMagic 2.0.7 和 GSAP 3.6.0 导入的外观：

import ScrollMagic from "scrollmagic";
import "scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators";
import { gsap, Power1 } from "gsap";
import { TweenMax, TimelineMax } from "gsap";
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";

ScrollMagicPluginGsap(ScrollMagic, gsap);

不要忘记安装 scrollmagic、gsap 和 scrollmagic-plugin-gsap

如何加载指标插件？

1 个答案: