Scroll animate from cover to contain?

Hi all-

First this is only designed in mobile, so jump to that breakpoint to start.

I have a wide image that i want to have in cover to start so you only see the middle few hundred pixels as shown.

As you scroll I want to basically scale down the image to end up like a contain image, so that you can see the entire thing.

I have the containers working as I want them for the scrolling (I think) but maybe there is a better way to do this?

I dont think you can have an interaction that changes from cover to contain so I was changing the height of the container to go from a portrait length of 100VH to about 40VH to accommodate the different aspect ratios.

I just cant get the image to scale down in a meaningful way, it just ends up being too small and there is white space.

How can i start with an image that is too wide for my screen and just scale it down so that it fits in the container at the end?


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