问题标签 [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.
61 问题
0
投票
0
回答
19
浏览
reactjs - GSAP 在图像加载之前设置 scrollTrigger 标记，并且动画不会在刷新时运行 Gatsby.js/React
GSAP 脚本在页面图像加载之前运行，因此 scrollTrigger 标记在页面上的高度错误，如下所示，这会导致动画无法按预期运行（当滚动到视口时，图像应该淡入和向上）：
而在图像加载并调整页面大小后，它们位于正确的位置并且动画按预期运行：
此外，如果页面被刷新，滚动动画根本不会运行。
我尝试过 useLayoutEffect 而不是 useEffect 并尝试使用 refs 和 onload 事件来等待运行 GSAP 脚本，但都没有奏效。我正在使用 React-Bootstrap 并且图像是响应式的，因此我无法在父元素上设置固定高度，因为我不知道它们将提前渲染的高度。
我做了一支笔来演示这个问题： https ://codepen.io/EOJA/pen/XWzBZew?editors=0010