How to pin section and then make one side in pinned container scroll

[amitr95]

I'm trying to achieve the following flow with my linked demo:

 

• User scrolls past .configurator and the section pins
• Then, when the user tries to scroll down #configurator-pin pins and moves up and down as the user scrolls (like position: sticky)
• And then the content in #configurator-freeroam scrolls as standard

 

The answer by akapowl in this thread is sort of what I'm after. However in my demo, I'm trying to make the .configurator pin (which includes the header) and then pin the left and right sections.

 

My left and right sections looks to be working fine, but I cannot get the header in the pin, even though I've defined trigger: container.

See the Pen abYJEVo by amit_rai95 (@amit_rai95) on CodePen

[Cassie]

The start trigger is just the place that the pin initially takes effect. The element defined as the pinned element is the one that gets pinned.

In your case that's #configurator-pin - this element doesn't contain the header - so the header element isn't being pinned.

You can pin both of them separately like this?

See the Pen qBoroZy?editors=1010 by GreenSock (@GreenSock) on CodePen

Hope this helps!