Pinned sections - section order workaround for when they are to be content managed?

[finlay-x]

I have a setup of scroll trigger sections with particular sections being pinned, unfortuneatly this leads to sections beyond the pinned sections completing their progress during the scroll of the pinned sections.

The main issue is that the sections need to be content managed and so I dont necessarily know in what order they are to appear - from what I have read in other forum posts and the common ScrollTrigger mistakes article - the most common solution to my problem seems to be to re-order my JS so that it matches the content, but in this case I cant do that due the aforementioned content management requirement.

The only other way I have been able to work around this is by allowing the pinned sections to take up 100vh of the page by removing the pinned container, however I would like to keep the pinned sections scrolling in the flow of the document at their natural height, as they are now.

So, is there any workarounds, hacky solutions etc that I can try to allow this work?

See the Pen YzRXZZN by finlay-x (@finlay-x) on CodePen

[GreenSock]

Two tips:

1. If at all possible, create your ScrollTriggers in the order they'd occur while scrolling. Or you can define a refreshPriority to tell ScrollTrigger which order things should get refreshed in. It's very important that ScrollTriggers calculate their start/end values from top to bottom because if you pin something higher up, it'll push the ones below further down.
2. If you're defining trigger elements that are INSIDE a container that you're pinning elsewhere, you must tell ScrollTrigger to make the adjustments accordingly by setting pinnedContainer, as described in the docs.

Is this more like what you're looking for? 

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

[finlay-x]

Yes! That is perfect and works great, Thank you! I had tried using that pinnedContainer but was obviously using it in the wrong places 😁