如何在GSAP和Webpack中使用ScrollMagic [英] How To Use ScrollMagic with GSAP and Webpack

问题描述

要使用 ScrollMagic和GSAP ，您需要加载动画。 gsap.js 插件。使用Webpack，您可以执行以下操作（假设您使用CommonJS语法并使用npm安装所有内容）：

In order to use ScrollMagic with GSAP, you need to load the animation.gsap.js plugin. With Webpack you would do something like this to accomplish that (assuming you use the CommonJS syntax and installed everything with npm):

var TweenMax = require('gsap');
var ScrollMagic = require('scrollmagic');
require('ScrollMagicGSAP');

要确保这实际有效，您必须为Webpack配置添加别名，以便Webpack知道插件的位置。

To make sure that this actually works, you have to add an alias to your Webpack configuration, so that Webpack knows where the plugin lives.

resolve: {
  alias: {
    'ScrollMagicGSAP': 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap'
  }
}

不幸，当你使用这个配置和上面的CommonJS语法时，ScrollMagic不断抛出错误。

Unfortunately, ScrollMagic keeps throwing an error, when you are using this configuration and the CommonJS syntax like above.

(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js

推荐答案

解决方案

您必须通过添加以下用于停用的加载程序来告诉Webpack停止使用AMD语法define（）方法。

You have to tell Webpack to stop using the AMD syntax by adding the following loader that deactivates the define() method.

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
。

Don’t forget to install the loader with npm install imports-loader --save-dev .

为什么？

问题在于Webpack支持AMD（定义）和 CommonJS（require）语法。这就是 plugins / animation.gsap.js 中的以下工厂脚本跳转到第一个if语句并静默失败的原因。这就是 setTween（）等从未添加到ScrollMagic构造函数的原因。

The problem lies in the fact that Webpack supports the AMD (define) and CommonJS (require) syntax. That is why the following factory script within plugins/animation.gsap.js jumps into the first if statement and fails silently. That is why setTween() etc. are never added to the ScrollMagic Constructor.

告诉Webpack不支持AMD语法（使用上面提到的加载器），插件正确地跳转到第二个if语句，包含CommonJS语法。

By telling Webpack not to support the AMD syntax (using the loader mentioned above), the plugin jumps into the second if statement correctly, embracing the CommonJS syntax.

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

我希望这可以防止其他人花一整晚试图找出什么正在进行。

I hope this prevents other people from spending a whole evening trying to figure out what is going on.

这篇关于如何在GSAP和Webpack中使用ScrollMagic的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！