vargwin

Regarding the scrollbar jumping around, I figured out the issue - it was because in my case, the container had display: flex. I am guessing it's not directly supported?

Thanks @GreenSock. That is indeed what I am trying to do. I am still having trouble when some of the boxes are animated and some are not: https://codepen.io/vargwin/pen/MWdvVRJ

Thanks @mvaneijgen for such a quick response. If I have a set of boxes in main with predefined height, is there a programmatic way of finding out the required height of the view to play out all animations? For example, if I animated the third box in the same way, that requires adding even more height to the page. https://codepen.io/vargwin/pen/eYaEvxP If the page only contained one box of height smaller than page height, I still want the animation in that box to play. Seems like I need to have ("100vh" + box height) as the page height - correct?

I have multiple "section" in my main area where each section can have one or more animated children. I want to be able to scroll and for each section, when the section top hits the viewport top Pin the whole page in place. Start playing the current section children animations. When all animations are over, unpin and continue to next section. I am seeing two issues: 1. The animation on second section is not completing and third is not visible even at scroll end. 2. Scrollbar height is changing while scrolling and it jumps around. 3. In full desktop view, the scrollbar gets stuck at second section and repeatedly jumps back. Can you please help? Thanks!