Animation scrolling

Hello people, I have an issue with understandings how to make sections’ size changing after scrolling.

I have a hero page which is a black box (with navbar, logo and image), I want to create an interaction where that box decreases to its’ half and then different images will be displayed while scrolling. Does anyone know how to make it real? I am trying to find something similar, but there is no info about that interaction. Thank in advance!

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