So for a banner set I’m creating I’ve to animate a diagonal masks, to hide/show certain content.
I am aware with the group option and with using overflow hidden it is possible to mask, however in default that’s only for straight square rectangle masks. I’ve looked at @MaxZieb his tool for A vector ClipPath in Hype However, I couldn’t use it since IE and Safari do not support this yet, and we need the inventory on those browsers.
I’ve found this interesting ‘work-around’ on YouTube from 2018 for diagonal masking: https://www.youtube.com/watch?v=MJl5rz9U0SE
That makes extra groups to rotate and use as mask with overflow:hidden, and then inside that group counter rotates the content so it straightens out. I decided to go with this work around
It all worked fine in the end (Although, very time-consuming and non-efficient due to diagonally moving items). However, it seems that the content in these groups that are rotated are losing image quality. I’m using decent quality images, and a web font, and somehow the images that are in the mask look very unsharp.
What could be the cause of this? And more important what could be the solution to fix this?
(I can't share the project file publicly, however, I can share it in DM for the ones interested)