Aaron Beaudoin

Well, one problem is that if I change the CSS a bit to use display: grid; instead of relying on float: left;, everything breaks. That would either need to be fixed, or it would need to be made clear exactly what HTML structure and CSS is required for the pinning to work as expected. https://codepen.io/aaronbeaudoin/pen/GRBEpRz Another problem is that it looks like position: sticky; doesn't work properly on children inside the sidebar. This is one of the problems I also ran into with the sticky-sidebar package which I still have yet to find a solution for. If there is no solution to this, perhaps it could instead be done by using a nested ScrollTrigger inside the sidebar for the element I want to be sticky? I didn't actually try that to see it if would work, though. https://codepen.io/aaronbeaudoin/pen/vYaZNBV And I'd want to also be sure that this solution would be compatible with all the regular ScrollTrigger options. For example, one that I would probably want to use is anticipatePin because of how the sidebar jitters when it hits the end on my test iPad Mini. I don't intend to load you down with a ton of extra requirements or anything. You asked if there was anything else that would be needed, and these are the items I feel would be worth looking at in order to ensure maximum compatibility.

First of all, I just want to add my voice in thanks to @GreenSock for the "custom" solution above! Fantastic! I'd also like to add that I personally don't think that this particular use case is actually a "one-off" type that should be considered "built-to-order". From what I've seen, it's actually pops up fairly frequently around the web. Take for example the right sidebar of this Adidas product page (sorry the loading is slow, I linked to the Wayback Machine to try and ensure the link won't break). The sidebar might not have changing height drawers (though if you change the viewport size, it rearranging the shoe size buttons), but otherwise it's essentially exactly what this topic is describing. The page is still using this same implementation at of the time of writing this reply. The sticky-sidebar and sticky-sidebar-v2 packages which attempt to achieve this exact use case get nearly 8,000 weekly downloads combined on NPM. So then, you may wonder, why not just use those? Well I'm using the first of them, and I've found that on some devices the sidebar can "flicker" when scrolling quickly past the end of the "pinned" area, and there are some other issues. The authors did a great job, but I believe the GSAP team has proved themselves the most trustworthy source across the entire web for stuff like this. So, my feedback is that I actually see a huge benefit from officially supporting this, since a basic implementation already exists above. Using ScrollTrigger to pin an element of arbitrary height (could be larger or smaller than the viewport itself)... ...retaining scrolling inside the element while scrolling inside the pinned area (if the element doesn't fit inside the viewport)... ...sticking to each end of the element when it is reached while scrolling inside the pinned area... ...with a way to have the ScrollTrigger(s) watch the height of the element for changes. I understand the implementation above took some time to put together (again, thank you immensely). Yet the end result is not particularly "custom". I just created a GSAP account for the express purpose of sharing my two cents on this topic. The usages for such a feature are actually quite far and wide, as seen above, not isolated to the 1 or 2 requests of this form. An official "GSAP version" for this feature in the form of a plugin or something would be incredible, even if it was locked behind a paid tier. Thank you so much for all the incredible work you guys do, especially where doing so requires so much research to clean up after browser rendering spaghetti code (looking at you, mobile Safari).