This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Giovanni Caruso
Posted Jul 14 - Read on Facebook

Hi. Newbie here! :) Is there a way to create a custom shape layer for a mask? Let's say I want to create a transition close to the one made by Min-Sang Choi but using my own shape instead of a circle (or square, or rectangle or any other "standard" geometric figure). Thanks for your help :)

10 Comments

Min-Sang Choi

If you want to use square shape, just change borderRadius to 0. or remove that property. :-)

Giovanni Caruso

No no... I don't want to use any of that (no circle, square, triangle, etc.).

Min-Sang Choi

hmm maybe you can draw a custom shape using canvas and add a sublayer to it. haven't tried yet but will try when I get some time. http://sarasoueidan.com/blog/css-shapes/

Giovanni Caruso

Thanks! I'll give it a try :)

Benjamin Den Boer

You can also use Webkit Image Masks to mask layers using images (which means you could use any shape).

layerA.style["-webkit-mask-image"] = "url(images/mask.png)"
layerA.style["-webkit-mask-repeat"] = "no-repeat"
layerA.style["-webkit-mask-size"] = "424px 124px"

Giovanni Caruso

Thanks, Benjamin Den Boer. Maybe I'm wrong, but in this case, it is not possible to animate the mask since we have one single layer, right? (i.e. applying scale or opacity to the "mask.png" without affecting the "mountains.png").

Benjamin Den Boer

Giovanni Caruso that's true. You can target the layer to animate both the mask and the image. There is a way to only animate the mask, though, simply by creating a new layer. (Perhaps not ideal, but it's fairly easy to set-up)

Video + Code: http://cl.ly/Y6ip

Giovanni Caruso

Thanks again. I'll do some test. I've already found a workaround simply by creating one more layer on Sketch to fix the transition. Of course, it is a trick (a very bad one ;) ). So, I was looking for a less "newbie" way to implement the animation :)

Marc Krenn

Is this still working for you, Benjamin? Can't get it to work :/

Marc Krenn

Double-checked some example files on -webkit-masking and they also stopped working. Seems to be broken, Koen.

Read the entire post on Facebook