I'm attempting to create a fade-in parallax effect on the text as you scroll the page. So far the effect is working quite well — barring a slight hiccup that occurs every time the page is visited for the first time (and when refreshed).
The element (which should have an starting opacity of 0) is clearly visible if you scroll down from the hero section into the intro section. Once it passes the scroller-start point only then it goes it 0 — causing a flash and jerk of content. Oddly, now if you were to scroll back up and down the page — it works as intended.
Demo: https://codepen.io/adamgian/pen/RwGKKQN
Example HTML markup:
<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 setup:
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 }
);
At my wits end here. I thought fromTo properly handles the animation values before/after animating (it does seem to but not right off the bat) and immediateRender is automatically true if you use ScrollTrigger/fromTo. Not sure what else I am missing.