Skew animation performance issue. Skew Div or Section but not the Background image. Object masking

Please, help!! A simple function that I didn’t find on webflow.
How to animate image beveling on scroll animation. Or how to animate the skew of a Div block without distorting the contents of the block.
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/

Nice design! I’m loving the illustration and color choices.

Your link is no longer visible, so I can’t give you specifics — but the solution most likely lies in separating the div that holds the content that you want to avoid distorting and the div that you want to animate. You could utilize those elements’ position to keep in the right place that you need.

Unless, are you asking about masking the image inside the div that you want to skew? That would be a bit more complicated, but if you send a working link I’d be glad to have a look!

Hi! I love your design! I’m not sure without seeing your project if this is what you mean or not, but I was working on a card hover animation a couple weeks ago where the card would kind of tilt left and right. It wasn’t working at first, but I found that adding a “children perspective” from the 2D&3D Transforms section in the panel helped make it retain its shape and size. I used a perspective of 1000 px, but I would just play around with it a little.
Also, I used a rotate animation instead of skew for what I was looking for, but I imagine either would probably work. I hope this helps!