How to combine Covered layers and Horizontal Scroll

[Corfitz]

My goal is to create an effect where I reveal a section with horisontal scrolling sections. Though the horisontal scroll should not activate before the last cover has been scrolled away first. I have create a screen recording of the desired result here: 

 

 

The problem I am facing is that the horisontal scroll behaviour is initialised before it is visible, so one can never get to see the first slide. 

 

See the Pen yLpbxqd by imCorfitz (@imCorfitz) on CodePen

[OSUblake]

Welcome to the forum @Corfitz

 

Your video isn't working, so I'm not exactly sure what you are going after, but I would recommend to try and make one timeline with all the animations in it. Just a demo from another question to show how to make a timeline. Just add in your horizontal scrolling part to the timeline.

 

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

[Corfitz]

Thank @OSUblake

 

I just updated the topic with the embedded video. I see your point - could be a route to take, though behind the scenes, the horisontal scroll is actually a separate React component, that can be used from a headless cms. The client should be able to rearrange the order and such as they please.

 

I was wondering if the trigger property on the scrolltrigger for the horisontal scroll could be updated to not listen for the container but a viewport scroll position? If I know that there are three sections before the horisontal scroll - each with a height equivalent of viewport, one I could calculate the offset before the horisontal scroll should happen.. 🤔

 

The problem with this of course, would be that I would have to also know about all the other types of sections to appear before these gsap sections.

 

[OSUblake]

23 hours ago, Corfitz said:

I just updated the topic with the embedded video. I see your point - could be a route to take, though behind the scenes, the horisontal scroll is actually a separate React componen

 

That shouldn't matter. At the end of the day, React is just a fancy HTML generator. I would still try to create it as single timeline. Forget ScrollTrigger for a minute and just think of what should happen as just a normal animation. ScrollTrigger is basically just GSDevTools, but you can use a mouse wheel.

 

23 hours ago, Corfitz said:

I was wondering if the trigger property on the scrolltrigger for the horisontal scroll could be updated to not listen for the container but a viewport scroll position? If I know that there are three sections before the horisontal scroll - each with a height equivalent of viewport, one I could calculate the offset before the horisontal scroll should happen.. 🤔

 

You can set the trigger to be whatever you want, like literally any element you want, and of course you can define the start and end positions.