[ScrollTrigger- pin then fade in]

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...

 

 

<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,
      });

See the Pen ExmeQWW by lschneiderman (@lschneiderman) on CodePen

[ScrollTrigger Horizontal scroll to the right]

YES!

 

Thank you, @akapowl!

[ScrollTrigger Horizontal scroll to the right]

Hi, Zach,

 

The problem is, I want it so that when the user scrolls down, the content moves horizontally to the right. If I order the content from panel 5 to panel 1

See the Pen BaQvPKO by lschneiderman (@lschneiderman) on CodePen

, when I scroll down, the panels still move from left to right instead of from right to left. I want the panels to start with 1 and move horizontally to 5, but in the -x direction. Does that make sense?

 

If I change the code to xPercent: 100 * (sections.length - 1), it moves in the right direction, but there are no panels to the left of panel 1 ...

[ScrollTrigger Horizontal scroll to the right]

I'm using the vanilla codepen script attached to try to achieve horizontal scrolling going to the right instead of the left. Does anyone know how to do that?

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen