Multiple Video Scrolltriggers - weird in between spacing

[newguy123]

Hi

My STACKBLITZ:
https://stackblitz.com/edit/react-tbctyjhz?file=src%2FApp.js

 

I seem to be having a logic issue between multiple video scrolltriggers. In my STACKBLITZ example, you can see in my App.jsx, I have:
"Introveal", words fade in automatically, then fades out as you scroll
"Aerial", fades in, video schrubs, and title appear, then video fades out

all good up to this point
But I will have multiple "Aerial" type video scrollers with titles, so to simulate it I just duplicated the "Aerial" component for a total of 3 of them in my App.jsx

 

Now I have a weird problem that I'm not sure how to solve. The fading in/out between the IntroReveal/(1st Aerial), works great as the one fades in as soon as the previous fades out.
BUT, this is the issue, in the case of the Aerial, duplicated few times as I have it, there seems to be a 100vh between them. IE you have to scroll a lot after the 1st one fades out, before the next one starts fading in.
I'm not sure how to fix that, without messing up the timings elsewhere, since as I say after the Introreveal, all is good. AFTER the last, Aerial fades out, the dummy content I added there also comes in fine at correct time.

[newguy123]

Seems if I just wrap the 2nd and 3rd Aerial.jsx copy, each in it's own div like so:
 

<div style={{ marginTop: '-100vh' }}>

...then it shift them up and removes the "seemingly" blank 100vh between them

So seems it's solved

[Rodrigo]

Yeah this is not at all related to GSAP, just an HTML/CSS thing actually. Your elements have the height of the screen (100vh) and they are positioned relatively so  basically they are one after the other. Because of that and this ScrollTrigger config:

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: containerRef.current,
    start: 'top top',
    end: `+=${pageLength}`,
    pin: true,
    scrub: 1,
    //...
  },
});

The problem is that the current element has to move up entirely and the next has to reach the top of the viewport in order to this ScrollTrigger to start. What you can do if you want a continuous cross-fade effect is to stack the elements as shown in this demo:

See the Pen gOBQoPz by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!