0

当您滚动页面时，我正在尝试在文本上创建淡入视差效果。到目前为止，效果非常好——除非在每次第一次访问页面时（以及刷新时）都会出现轻微的打嗝。

如果您从 hero 部分向下滚动到 intro 部分，则该元素（其起始不透明度应为 0）清晰可见。一旦它通过滚动条起始点，它就会变为 0 - 导致内容闪烁和抖动。奇怪的是，现在如果您要向上和向下滚动页面 - 它会按预期工作。

演示：https ://codepen.io/adamgian/pen/RwGKKQN

示例 HTML 标记：

<section class="hero">
    <!-- 100vh bg/content -->
</section>
<section class="intro">
    <h1 class="gsap-intro">
        How come this text initally shows up? It should not show up at all and fade in. However once ScrollTrigger has been "tripped" it no longer has issues.
    </h1>
</section>

GSAP 设置：

let fadeInTimeline = gsap.timeline({
    scrollTrigger: {
        trigger: ".gsap-intro",
        start: "center 80%",
        end: "center 50%",
        toggleActions: "play reverse restart reverse",
        scrub: 0.4,
        markers: true,
    },
});

let fadeOutTimeline = gsap.timeline({
    scrollTrigger: {
        trigger: ".gsap-intro",
        start: "center 30%",
        end: "center -20%",
        toggleActions: "play reverse restart reverse",
        scrub: 0.4,
    },
});

fadeInTimeline
    .fromTo(
        ".gsap-intro",
        { y: "-20%", autoAlpha: 0 },
        { y: "0%", autoAlpha: 1 }
    );

fadeOutTimeline
    .fromTo(
        ".gsap-intro",
        { y: "0%", autoAlpha: 1 },
        { y: "40%", autoAlpha: 0 }
    );

我的智慧到此为止。我认为fromTo在动画之前/之后正确处理动画值（它似乎确实但不是马上）并且如果您使用ScrollTrigger / fromTo，immediateRender会自动为真。不知道我还缺少什么。

4

0 回答 0