trying to do this with scroll trigger

[zozo]

Hello, 

I'm trying to reproduce this https://youtu.be/DkHiVxh8plU

I can't wrap my head around it.

I tried to start from this code pen : 

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

And made this one, has a first step : 

but I'm not really sure if I'm going toward the right direction. 

 

I think in theory, the warper should be like 100vh height, the panel also, with the text inside it with auto height. 

or maybe the panel have auto height and the second panel is pushed down with css ? 

The first panel need to be pin when it hit the top, then released when the second panel hit the top minus the height of the inner height of the first panel. 

Then the warper should be pin, when it hit the top too, but not sure how to calculate when to release the pin on the warper. 

 When I tried to combined pining the warper and the panel, everything's fall appart, so I'm kind of lost here.

 Plus in the end there is this menu.... So maybe I should use a timeline instead ? 

If someone made something similar and could point me to the right direction, that would be awesome. 

 

Thanks ! 

See the Pen ZEWbxmr by romainmalauzat (@romainmalauzat) on CodePen

[ZachSaucier]

Hey zozo, thanks for supporting GreenSock.

 

I think this demo from the ScrollTrigger docs will help get you started:

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