ScrollTrigger- pin then fade in

[LSchneiderman]

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

Edited August 4, 2021 by LSchneiderman
change from fiddle js to codepen

[akapowl]

Hey, hello there!

 

First off, make sure you load GSAP - looks like you forgot that in your codepen demo.

 

If you want to trigger anything at a specific point, set/adjust the start value.

If you don't set a start for your ScrollTrigger, it will default to 'top bottom' for non-pinning STs and to 'top top' for pinning STs.

 

The first value is referring to the trigger-element and the second is referring to the viewport. So start: 'top top'e.g. would trigger when the top of your trigger-element hits the top of the viewport.

 

Also it's always good to define an end value. Besides the same concept as described above for the start values, you can use absolute scroll-positions like "400" (those you can also use for the start) and relative values like "+=100%" (The default for end is "bottom top").

 

You'll find a whole lot more info on that in the ScrollTrigger docs.

 

I'm absolutely unsure if I understood what exactly it is you want to do, but here is a demo along those lines. Hope it helps.

 

See the Pen 6ebb9fb4733ae1887df1e3574a28a58e by akapowl (@akapowl) on CodePen

[LSchneiderman]

Dear akapowl,

Thanks for your reply! 

 

What you provided is close to what I want to happen, but I just want the second image to fade in over the first without seeing it scroll at all. Is that possible?

[akapowl]

1 hour ago, LSchneiderman said:

What you provided is close to what I want to happen, but I just want the second image to fade in over the first without seeing it scroll at all. Is that possible?

 

You could for example have your images positioned absolute on top of each other in a container, pin that container with one ScrollTrigger, and with another that uses the body as the trigger (which is the default when no trigger is specified) trigger the animation as soon as the body has scrolled for 1px, so with a start: 'top top-=1px" e.g., or just start: "1px" (edited/added alternative)

 

Something like this maybe. Is that more like what you thought of?

 

See the Pen 6ebb9fb4733ae1887df1e3574a28a58e by akapowl (@akapowl) on CodePen

[LSchneiderman]

That worked. Many thanks!