Streaming live at 10am (PST)

Keyhole scrolling amimation


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 - Webflow - Backdoor market

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