ScrollMagicが想定外の所で発火してしまう

今回は技術的なお話。
今、運用中のwordpressの一部にパララックス効果のページを作ろうとしています。
wordpressのテーマによっては、サポートされているのですが、テーマ変更しなければいけないので今回は出来ない。

と言うことで、javascriptとcssを弄って対応目指しました。
が、どうも変な所で引っかかってしまったので、備忘録かねて記述。
javascript、cssを個別導入する方法などは、また別途。

画面に表示されていないのに発火する

今回はScrollMagicとTweenMaxというjavascriptライブラリを使って作りました。
一回まっさらなhtmlを作って、要素とjavascriptの確認をしたものを、
wordpressの固定ページにも書いてみましたが･･･動きがおかしい。
具体的には、triggerElementとtriggerHookが無視されているようです。

画面中央に来たときに、フェードインしてくるようにこんなコードを書いてある。

WordPressで表示させたら、何もアニメーション表示されない。
記事ページが表示されたと同時に、上の処理が全て終わっている様です。

試行錯誤

javascriptのコード処理タイミングが悪いのか？と画面のload後に上記コードを読ませてもダメ。

ScrollMagicのイベントにフックして、ログを書かせる事にする。

やはり、画面表示と同タイミングで発火して、処理が終わっている。
う～ん･･･
まっさらなhtmlにも同じようにログを出力させてみましたが、
こちらは想定通りのタイミングでログが出力される。

原因はテーマのアレ

画面が表示されるかされないかのタイミングで、
ScrollMagicのEnterイベントやprogressイベントが走っている。
このログが出力されるタイミングでブレイクポイントを置いてみたら、
画面は真っ白。

wordpressに起因するものだと思うのだけど、それらしい記事も見つからない。
（そもそもこんな事やる人数が少ないのか！？）

まさかテーマか？
と思いテーマの各種設定を見直ししてみると、
ロード画面の表示設定に目が止まる。
記事・ページが表示される前にローディング中を表すアニメーションを表示する設定がONになっている。

試しにOFFにしてみると、無事に想定通りのタイミングでScrollMagicが動く事が確認出来ました。

ScrollMagicのコーディングミスでも同じ事が起こる

今回、私が遭遇した症状はwordpress（テーマ）のロード画面により、
各ページの要素が表示されていない状態で、ScrollMagicのコントローラーがページ内の要素を捜査した事で起こっていました。

ロード画面をOFFにすることで対応できましたが、ロード画面も使いたいしScrollMagicも使いたいとなったらどうしよう･･･

ちなみに、ScrollMagicのScene作成時、
trigeerElementへ画面内に存在しない要素（セレクタ）を記述すると、
同じ様に画面が表示されたタイミングで発火します。