Search code examples
animationwebmaskdesigner

Mask Layer in Google Web Designer

We are working on html5 banners and i have a question regarding MASKING images in the google web designer. is there any example or how we can do it?

I am targeting similar kind of masking, check below link https://www.google.com/doubleclick/studio/externalpreview/#/-TzHWvlDR7280-AgZDdYNg?creativeId=34578016

Solution

  • To create masking effect and animations, you have three options:

    1. overflow: hidden, (Works on all browsers but is simple)
    2. Clip path. (It is highly flexible but IE does not support it and it need SVG tools)
    3. Mask property. (Flexible and easier than Clip path but only webkit browsers support it, Safari &Chrome)

    You can read the whole document with the example here: https://support.google.com/richmedia/answer/6286751?hl=en

    Hope it helps your project. Majid.