Expanding Main Image on Scroll

Hi, I’m trying recreate the effect seen on this page:

I want my main image to grow to cover the full vw and vh before the next section scrolls in. And if possible the image should also change from a 1:1 ratio to 16:9 during the scroll.

any help on how this could be achieved would be highly appreciated.

Thanks

Here is my read only link;

https://preview.webflow.com/preview/kuubno?utm_medium=preview_link&utm_source=designer&utm_content=kuubno&preview=313399c044aaca117e3447a22bd7c42c&workflow=preview

Hey,

I’d love to help you achieve that smooth scroll transition for your main image to expand to full vw/vh and shift ratios from 1:1 to 16:9. I have extensive experience with these kinds of custom interactions and can make your vision come to life seamlessly. Let’s connect!

hi @thewebflowteam feel free to provide example and share with community so everyone can benefit from your knowledge. That is key point of this forum. :man_shrugging:

hi @19Blue there is many tutorials in written or video form as this effect is often requested also this forum after 10 years has many solutions. You can also check “made in Webflow” to find examples. So fell free to use your favourite browser and do you r research before you start new request. :vulcan_salute:

anyway here is a simple example from me. :hugs:

live preview

@Stan Like the many other solutions I have previously found while doing research in my favourite browser this solution does not lock the starting aspect ratio at 1:1. It will change with the viewport size.

What I’m asking for help with is for the main image to start at a fixed 1:1 ratio and change to 16:9 as it expands. Regardless of the viewport size.

Any thoughts here?

look on principles and you may adjust values to your needs
or
As WF offers very limited tools in UI the custom CSS and JS will be the only option.

good luck

Thank you, will see if I can make this work.