問題タブ [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.

0 投票する
1 に答える
327 参照

javascript - GSAP ScrollTrigger アニメーションが Locomotive JS で機能しない (ウィンドウのサイズが変更されるまで)

サイト全体に を使用しているセクションがありますScrollTrigger。を実装するLocomotive JSと、すべてのScrollTriggerアニメーションが機能しなくなりました。

update() ScrollTriggerフォーラムを読んだところ、Locomotiveスクロールする必要があることがわかりました。これを実装しましたが、結果は見られませんでした。

次に、表示されているウィンドウとアニメーションのサイズを変更すると、ScrollTrigger動作し始めました。

つまり、アニメーションはサイズ変更時にトリガーされますが、ページの読み込み時にはトリガーされません。

私は実装update()して試しましrefresh()たが、うまくいきません。

デモここでも問題を示すフィドル):

テスト 1

私が気付いたのは、すべてをコメントアウトしてlocomotive js実行すると、次のようになります。

は表示されますが、がアクティブなlogs場合は表示されません。locomotive

これが何が問題なのかを示している可能性があるかどうか不明ですか?

テスト 2

スニペットの最後で、次のコマンドを実行して、実行中かどうかを確認し、ステートメントrefresh()が返されているかどうかを確認しました。else繰り返しますが、理由はわかりません。

再作成する手順:

  1. このフィドルを開く
  2. 出力ボックスを幅のあるものに広げます(つまり1300px
  3. フィドルを実行する
  4. 下にスクロールすると、要素が読み込まれていないことがわかります
  5. 出力ボックスのサイズを小さいものに変更します
  6. scrollTriggerアニメーションが表示されるようになりました

この問題を示す gif は次のとおりです。

ここに画像の説明を入力

0 投票する
0 に答える
55 参照

javascript - GSAP scrollTrigger を使用して NextJS の問題をビルドする

私は Nextjs で GSAP を使用しています。これが私のページです。開発モード (npm run dev) ではすべて正常に動作しますが、プロジェクトを静的にビルドすると (npm run build) 要素が表示されません。これは scrollTrigger プラグインで発生します。したがって、すべてが正常に機能しますが、要素はビルドに表示されません。手を貸していただける方、よろしくお願いします。