Yeah, I know. I've opted to use a static because users almost never change their preference while browsing a page. As soon as they reload or navigate, the preference is respected. But your method does seem powerful, thanks for that.
Oh, yes, that makes sense thinking about it. Definitely will have to look into contexts for future reference.
---
And actually, I found a different solution altogether, that doesn't require setting a max-height at all. 😆
I gave the map a position: sticky, so it stays next to the grid while scrolling. This keeps the natural scroll, and so there's no need for anything fancy (just a good old ScrollTrigger.refresh()). This isn't how the designer designed it, but the client is happy just the same.
But I learned a lot from you, as usual, so the exercise definitely hasn't been pointless.
So what I ended up doing is create an array of all sections, and an array of the sections with dark backgrounds.
Then I just check if the current section is in the array of dark sections, and adjust the styling accordingly.
Thanks again for putting me on the right track @Cassie!
See the Pen bGvLKvV?editors=0010 by pieter-biesemans (@pieter-biesemans) on CodePen
Pieter Biesemans's post in Scrolltrigger elements triggering wrong with max-height was marked as the answer