Scrolling triggers div to shrink

Hello Webflow community! I have a specific scrolling interaction that I can’t figure out, nor can I find any relevant resources. Hopefully you can help.

I’ve built my site with sections (read-only in footer). Here’s what I would like to achieve. When Section 2 scrolls into view, I want Section 1 to shrink so that they both fit, and I want elements within Section 1 to move (Littlehouse scrolls up off page, Menu moves up).

Here is a screenshot is how I want it to look once Section 2 is fully visible.

Essentially, I’d like the site to be a series of snap-scrolled 100VH sections, but the first scroll triggers Section 1 to shrink and allow Section 2 to scroll into view, sitting together as pictured in the screenshot. On the next scroll, Sections 1 and 2 should scroll out of view together and Section 3 snaps into place.

I’d be so grateful for a steer in the right direction. Thanks in advance!


Here is my public share link: LINK
(how to access public share link)