CDNでJavaScriptプラグインが読み込めない（GSAP・ScrollTrigger）

Question

変なところで行き詰まったのでご相談させてください。

GreenSock ScrollTrigger Get Started in 3 Easy Steps
https://www.youtube.com/watch?v=CES3seLtepM&feature=emb_logo

上記リンクを参考に、html上にCDNで
JavaScriptのGSAPライブラリおよび「ScrollTrigger」プラグインを追加したかったのですが
「Missing plugin?」のエラーが出てしまいます。

**HTML**

  <div id="intro">
    <div class="content">
        <img src="img/img_greensock-logo.png" />
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
  <script src="js/main.js" defer></script>
</body>

**js/main.js**

gsap.registerPlugin(ScrollTrigger);
function init(){
    gsap.to('#intro img', {
        opacity: 0,
        ScrollTrigger: {
            trigger: '#intro',
            start: 'top top',
            scrub: true
        }
    })
}
window.addEventListener('load', function(){
    init();
});

現在、これを実行すると、
期待挙動としてはスクロールして#intro imgが指定位置まで達したところで
opacity:0にフェードアウトする予定が、
スクロールを待たずhtmlを読み込んだところでフェードアウトしてしまいます。

**Chrome Console上のエラーメッセージ**　（改行を追加しています）

gsap.min.js:10
Invalid property ScrollTrigger
set to {trigger: "#intro", start: "top top", scrub: true}
scrub: truestart: "top top"trigger: "#intro"__proto__:
Object Missing plugin? gsap.registerPlugin()

最初はhtml上で読み込んだCDNのリンク先が誤っていたのかと思い
確認しましたが間違っていませんでしたし、
エラーメッセージにgsap.min.js:10とはあるものの
CDNで読み込んでいるgsap.min.jsの10行目に誤りがあるわけでもありません…。
怪しい点から潰していこうにも、まず「どこが怪しいか？」を見定められていない状況です。

こういう時はどこからチェックするのがよいのでしょうか…。
ご教示いただければ幸いです。

Comments

[m.ts10806]

>読み込んだリンク先も確認しましたが
確認したページURLを提示してください。

[spangl]

> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>

html上で読み込んだこのリンク先が誤っていたのかと思い、
確認していたが間違っていなかった、の意味でした。言葉足らず失礼いたしました。

[m.ts10806]

質問は編集できます。調整してください。
あと、提供元のドキュメントも確認されたほうが良いかと思います。
オプション設定に関してのエラーのようですし、それで解決できる可能性も高いです。

[spangl]

無事に修正できました。お手数をお掛けしました、ありがとうございました。

Answer 1

ええと、CDNのGSAPとScrollTriggerのバージョンがずれている(別のディレクトリから読んでいる)のが原因です。ScrollTriggerと同じ3.5.1から読んでください。

-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

おっと、もうひとつ。小文字で書いてください。

-       ScrollTrigger: {
+       scrollTrigger: {

Comments

[spangl]

ありがとうございました！いただいた内容で無事に解決しました。
小文字もそうですが何よりこれまで「バージョンを合わせる」発想が全くなく、素人にとって大変勉強になりました…
お手数をお掛けしました。