問題タブ [scrolltrigger]

gsap の ScrollTrigger を試しています。カスタム スクロール コンテナーがあり、ScrollTiggers スクローラー プロキシを使用してスクロールをハイジャックしたいと考えています。ただし、結果は非常に不安定です。私は何か間違ったことをしていますか？ここに私がこれまでに持っているものの例があります。コードサンドボックス

コードサンドボックスのデモからわかるように、スクロールは非常にスムーズですが、マーカーはいたるところで跳ね返り、緑色の四角形はスムーズに拡大するはずですが、スムーズに拡大するのではなく、スクロールすると跳ね返ります。この例のScrollTigger Locomotive Scrollのような非常にスムーズな効果を実現する他のライブラリのデモがあります。これは、より多くの例を見つけることができるドキュメンテーション ページです。

GSAP ScrollTrigger アニメーションを使用してタイムライン セクションを作成しようとしています。5 つの異なる画像を含む 5 つのテキスト ブロック (5 つのタイムライン要素) があります。デフォルトでは、表示されるテキスト ブロックは 1 つだけですが、スクロールすると、非表示のテキスト ブロック (2 番目のテキスト ブロック) が 100% の不透明度でフェードアップし、前のテキスト ブロック (1 番目のテキスト ブロック) の不透明度が減少します。3 番目のテキスト ブロックがアクティブになると (スクロールで表示される)、最初のテキスト ブロックが画面から消え、2 番目のテキスト ブロックの不透明度が減少します。

注: デフォルトでは、アクティブなテキスト ブロックは 1 つだけです。ただし、スクロールすると、2 つのテキスト ブロックが表示されます。一方は不透明度 100% でアクティブになり、もう一方は不透明度 50% でぼやけます。

デフォルトの状態では問題なく動作していますが、スクロールしているときに前のテキスト ブロックが画面から消えません。私が codepen ( https://codepen.io/shuvosd/pen/RwKZEEe ) で行ったことを見て、問題を解決するのを手伝ってくれたら、本当に感謝しています。前もって感謝します。