为了使用ScrollMagic with GSAP ,你需要加载animation.gsap.js
插件。使用 Webpack,您可以执行类似这样的操作来完成此操作(假设您使用 CommonJS 语法并使用 npm 安装所有内容):
var TweenMax = require('gsap');
var ScrollMagic = require('scrollmagic');
require('ScrollMagicGSAP');
为确保这确实有效,您必须向 Webpack 配置添加一个别名,以便 Webpack 知道插件所在的位置。
resolve: {
alias: {
'ScrollMagicGSAP': 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap'
}
}
不幸的是,当您使用此配置和上述 CommonJS 语法时,ScrollMagic 会不断抛出错误。
(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js
最佳答案
解决方案
您必须通过添加以下停用 define()
方法的加载程序来告诉 Webpack 停止使用 AMD 语法。
// Webpack 4+
module: {
rules: [
{ parser: { amd: false }}
]
}
// Webpack <= 3
// Don’t forget to install the loader with `npm install imports-loader --save-dev`
module: {
loaders: [
{ test: /\.js$/, loader: 'imports-loader?define=>false'}
// Use this instead, if you’re running Webpack v1
// { test: /\.js$/, loader: 'imports?define=>false'}
]
}
为什么?
问题在于 Webpack 支持 AMD (define) 和 CommonJS (require) 语法。这就是为什么 plugins/animation.gsap.js
中的以下工厂脚本跳转到第一个 if 语句并静默失败的原因。这就是为什么 setTween()
等从未添加到 ScrollMagic 构造函数中的原因。
通过告诉 Webpack 不支持 AMD 语法(使用上面提到的加载器),插件正确地跳转到第二个 if 语句,接受 CommonJS 语法。
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['ScrollMagic', 'TweenMax', 'TimelineMax'], factory);
} else if (typeof exports === 'object') {
// CommonJS
// Loads whole gsap package onto global scope.
require('gsap');
factory(require('scrollmagic'), TweenMax, TimelineMax);
} else {
// Browser globals
factory(root.ScrollMagic || (root.jQuery && root.jQuery.ScrollMagic), root.TweenMax || root.TweenLite, root.TimelineMax || root.TimelineLite);
}
我希望这可以防止其他人花费整个晚上来弄清楚发生了什么。
关于javascript - 如何在 GSAP 和 Webpack 中使用 ScrollMagic,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35531126/