Search the Community

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.