shayan98

thanks a lot for helping. but actually no! you called updateSidebar() in the action function! and it work just for this pen! in real cases there are over 50 actions in page that can change the height of sticky side bar and its content section! and we can't call updateSidebar() on everywhere in the real usage. It needs to detect height changes and update itself accordingly

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.