Hi,
I'm working on a website where a large image scales as you scroll. At page load, I want the image to start at 20% scale and be positioned higher on the y-axis so that it's visible in the viewport. While the setup mostly works, I've encountered an issue: when I apply a negative y-position, the scaling no longer happens from the center.
https://codepen.io/remcovb/pen/eYwvGqb
However, when I remove the negative y-position, the scaling works correctly from the center, but then the image isn't in the viewport anymore.
https://codepen.io/remcovb/pen/bGPqoyo
Any advice on how to maintain centered scaling while keeping the image in the viewport? Thanks in advance!