Thanks for your feedback on this! I worked out that the easiest way to do this is to handle it in two separate elements.
The first is a 100vh container set to position:absolute and a CSS class on the body to block scrolling. When the user clicks on a button inside this hero element, the element gets hidden by tl.to() and a height of 0, revealing the next page section. The onComplete event then removes the scroll-blocking CSS from the BODY.
