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.
Here are some examples:
The 300x600 and 970x250 do look somewhat sharp (But if you look at the text you see it’s a bit blurry too)
Link: 970x250
Link: 300x600
But the smaller formats 300x250 and 728x90 the quality noticeably worsens.
Link: 728x90
Link: 300x250
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)
Kind regards,
Bannerman
1 post - 1 participant