問題タブ [scrolltrigger]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - GSAP ScrollTrigger アニメーションが Locomotive JS で機能しない (ウィンドウのサイズが変更されるまで)
サイト全体に を使用しているセクションがありますScrollTrigger
。を実装するLocomotive JS
と、すべてのScrollTrigger
アニメーションが機能しなくなりました。
update()
ScrollTrigger
フォーラムを読んだところ、Locomotive
スクロールする必要があることがわかりました。これを実装しましたが、結果は見られませんでした。
次に、表示されているウィンドウとアニメーションのサイズを変更すると、ScrollTrigger
動作し始めました。
つまり、アニメーションはサイズ変更時にトリガーされますが、ページの読み込み時にはトリガーされません。
私は実装update()
して試しましrefresh()
たが、うまくいきません。
デモ(ここでも問題を示すフィドル):
テスト 1
私が気付いたのは、すべてをコメントアウトしてlocomotive js
実行すると、次のようになります。
は表示されますが、がアクティブなlogs
場合は表示されません。locomotive
これが何が問題なのかを示している可能性があるかどうか不明ですか?
テスト 2
スニペットの最後で、次のコマンドを実行して、実行中かどうかを確認し、ステートメントrefresh()
が返されているかどうかを確認しました。else
繰り返しますが、理由はわかりません。
再作成する手順:
- このフィドルを開く
- 出力ボックスを幅のあるものに広げます(つまり
1300px
) - フィドルを実行する
- 下にスクロールすると、要素が読み込まれていないことがわかります
- 出力ボックスのサイズを小さいものに変更します
scrollTrigger
アニメーションが表示されるようになりました
この問題を示す gif は次のとおりです。
javascript - GSAP scrollTrigger を使用して NextJS の問題をビルドする
私は Nextjs で GSAP を使用しています。これが私のページです。開発モード (npm run dev) ではすべて正常に動作しますが、プロジェクトを静的にビルドすると (npm run build) 要素が表示されません。これは scrollTrigger プラグインで発生します。したがって、すべてが正常に機能しますが、要素はビルドに表示されません。手を貸していただける方、よろしくお願いします。