Keyhole scrolling amimation

Hello,

Any tips on how to create a keyhole effect animation with scroll?

1st load - empty page with the keyhole centered in the middle

2,3 - by scrolling down keyhole gets bigger imitating a movement towards it


4 - Content starts to appear through the keyhole - in this case a instagram like 3 column grid. Content is smaller at first and gets bigger with the scroll

5 - Keyhole scales out of the view. Content is fully visible, burger menu and logo appears at the top.

I did a quick test with an .svg item and scale scrolling effect, but wanted to see, maybe there is a better way to achieve this effect.

Public share link - https://preview.webflow.com/preview/backdoor-market?utm_medium=preview_link&utm_source=dashboard&utm_content=backdoor-market&preview=f3f511313ebfa6f7fa057397246f7d50&mode=preview

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