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.