14

ScrollMagic を 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
4

5 に答える 5

20

ソリューション

メソッドを非アクティブ化する次のローダーを追加して、AMD 構文の使用を停止するように Webpack に指示する必要がありますdefine()。

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 コンストラクターに etc. が追加されることはありません。

(上記のローダーを使用して) Webpack に AMD 構文をサポートしないように指示することで、プラグインは 2 番目の 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);
}

これにより、他の人が何が起こっているのかを理解しようとして一晩中過ごすのを防ぐことができれば幸いです.

于 2016-02-21T01:14:47.170 に答える