hey jack @GreenSock.
Thanks for your attention and for helping the community. I'm much more eager to work with GSAP when I see your support.
I used your code for my sticky sidebar and it was perfect. but there is a problem. I work with vue & nuxt and I used this sticky for my products grid. As any online shop, products grid have filters sidebar. so some action on filters can change the height of my sidebar or content section.
Eg: imagine that there is collapsible box in filter that in the render time they are closed and the user during filtering decides to open some of them or close the others, and that means height changes on sidebar or the result of filters may have some changes in quantity and that also changes the height of content box.
I think the problem is when the height changes, ScrollTrigger needs to be refreshed, but I’m not able to detect for example when the collapsible transition has been finished to refresh the ScrollTrigger. I need some solution to detect the finish time of all transition or rendering dom elements and then refresh the ScrollTrigger or make the ScrollTrigger that smart to detect height changes and refresh itself.
I tried to work with ResizeObserver API but I couldn't do that.
here is my pen that explain my case:
https://codepen.io/shayandrg/pen/GRMQYyv
If you look at my pen you can see I tried to simulates the collapsible by adding the action button.