問題タブ [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.
reactjs - GSAP は、画像が読み込まれる前に scrollTrigger マーカーを設定し、更新時にアニメーションが実行されない Gatsby.js/React
ページ画像が読み込まれる前に GSAP スクリプトが実行されるため、scrollTrigger マーカーが次のようにページ上で間違った高さにあり、アニメーションが期待どおりに実行されません (ビューポートにスクロールすると、画像がフェード インしてアップするはずです)。
画像が読み込まれ、ページのサイズが変更された後、画像は正しい場所に配置され、アニメーションは意図したとおりに実行されます。
また、ページが更新されると、スクロール アニメーションはまったく実行されません。
useEffect の代わりに useLayoutEffect を試し、参照と onload イベントを使用して GSAP スクリプトの実行を待機しようとしましたが、どちらも機能しませんでした。私は React-Bootstrap を使用しており、画像はレスポンシブであるため、事前にレンダリングされる高さがわからないため、親要素に固定の高さを設定できません。
問題を示すためにペンを作成しました: https://codepen.io/EOJA/pen/XWzBZew?editors=0010