I’ve prototyped this in Adobe XD and recorded the animation playback generated by XD to illustrate the concept. I have yet to figure out how to make this happen as actual HTML/CSS. The intended interaction has the movement of the logo expanding happen on scroll-down (as the user scrolls down the page) and the movement of the logo condensing on scroll-up (as the user scrolls back up). In a finished state, there would be additional on-scroll animation after this initial scroll-down. That can include anything, such as images and text “flying” into view overlaying the background video, or replacing the background video entirely with different content.