Animation performance issue. Object masking

Hello everyone!
How to animate image beveling on scroll animation?
My method - using the skew animation of the Div. Since Div block skew animation causes images to be distorted, I made a reverse skew animation for the image itself. The problem is that this method requires too many performance resources. Due to low performance, the use of skew animation with a slider instead of an image is excluded. Also it doesn’t work well on mobile devices.
What is an alternative way to create a similar animation?

Here is my method Read-Only: Webflow - Copy of PIANOHOF

Here is live site: https://pianohof-64ed7a0c5faa44fd946eefcb84f7d5.webflow.io/