Thank you @Rodrigo. Yes I looked at these solutions and while they get close, they don't quite work in combination.
Similarly to the first example, I want a section at the top that scrolls "normally" and as the user scrolls down to a certain section, instead of the horizontal scroll scrubbing with the scroll, the page gets 'caught' like in the second example. The issue with Observer is that the user cannot be scrolling/the window needs to be still for the Observer to take hold. As can be seen from my example, if I 'flick' the page, I'm able to scroll past the Observe section. It's only if I allow the scrolling to come to a standstill in the Observe region that it can take over. I think this is more a Mac/Trackpad thing.
I've thought about using pinning to create the illusion that the Observer section is stuck but then I'm not sure what to do with the extra space that the pin creates after the user finishes the Observer section and returns to normal scroll. and there will always be a possibility that the user can freescroll so hard that they even move passed the pin 'illusion'.
I've played around with onEnter on my ScrollTrigger (can also be seen from my example) but even though I enable Observer at this point, it doesn't actually take effect until the inertia scroll has come to a standstill.