要使用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语法。
module: {
loaders: [
{ test: /\.js$/, loader: 'imports-loader?define=>false'}
// Use this instead, if you’re running Webpack v1
// { test: /\.js$/, loader: 'imports?define=>false'}
]
}
不要忘记使用npm install imports-loader --save-dev
安装装载机。
为什么?
问题在于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);
}
我希望这可以阻止其他人花一整晚来试图弄清楚发生了什么。
medoingthings解决方案已经改变了语法以包含“-loader”后缀。
module: {
loaders: [
{ test: /\.js$/, loader: 'imports-loader?define=>false'}
]
}
https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
我遇到的解决方案不需要你改变你的webpack.config.js文件,实际上对我有用,可以在这里找到:https://github.com/janpaepke/ScrollMagic/issues/665
它的要点是确保你通过npm(希望这很明显)添加ScrollMagic和GSAP以及imports-loader:
npm install --save scrollmagic gsap
npm install --save-dev imports-loader
然后在要使用ScrollMagic和GSAP的文件中执行以下导入:
import { TimelineMax, TweenMax, Linear } from 'gsap';
import ScrollMagic from 'scrollmagic';
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';
使用Webpack 4.x和imports-loader 0.8.0