I'm trying to pin an invisible element and then fade it in once it hits the top of the screen and is pinned. Right now, it starts fading in before it hits the top of the screen. How would I change that please? I'm on the ScrollTrigger learning curve...
https://codepen.io/lschneiderman/pen/ExmeQWW
<div class="screen" id="screen-newark">
<img class="full-width" id="newark" src="//newsinteractive.post-gazette.com/LauraDev/img/Newark_Airport-creative-commons.jpg"/>
</div>
<div class="screen" id="screen-flight">
<img class="full-width" id="flight" src="//newsinteractive.post-gazette.com/LauraDev/img/view.jpg"/>
</div>
.screen {
position: relative;
width: 100%;
height: 100vh;
background-color: transparent;
overflow-y: hidden;
}
.full-width {
width: 100%;
height: auto;
}
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.create({
trigger: "#newark",
start: "top top",
end: "max",
pin: true,
pinSpacing: false
});
const anim2 = gsap.fromTo('#flight', {autoAlpha: 0}, {duration: 2, autoAlpha: 1});
ScrollTrigger.create({
trigger: '#flight',
animation: anim2,
toggleActions: 'play complete reverse reset'
//once: true,
});
