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

What is Framer? Join the Community
Return to index
Paul Cotton
Posted Mar 16 - Read on Facebook

Curious as to whether I can use an SVG path as a mask / clipping layer.

At the moment all masks appear to be rectangular (unless I set borderRadius.) I'm getting around this by giving the non-rectangular forms I want to use as masks rectangular backgrounds, effectively meaning that if I want a triangle as a mask - I must make a rectangle with a transparent triangle cut out in the middle of it.

Is this the best / only way?

12 Comments

Chad Lonberger

Haven't attempted working with SVG in framer, but (prior to modules) I built classes that generated multiple rotated rectangles/sub-layers masked to generate different sided simple polygons. Primarily to mask images with various shapes. Love to hear if there's a better solution.

Mike Feldstein

I did this a while ago and the gotcha was that it can't be just an svg shape, the svg has to define a clip path in the actual svg file/code. Once you get it working though you can do some dope effects by animating the svg path.

Try this http://sarasoueidan.com/blog/css-svg-clipping/

Paul Cotton

So a Sketch import won't cut it, but if I define the clip path in an actual .svg and then call that into Framer (image property on a layer?) I should get the desired effect?

Mike Feldstein

Definitely can't use svg from a sketch import. Here's a workgin example: http://share.framerjs.com/nq652kuhbedn/

Steps were export an svg from sketch, and modify it to have the path inside the clipPath. You can copy my svg def in the index.html and just replace the path element with yours if you want.

Other tips is you have to user webkitClipPath in framer studio.

Mike Feldstein

And here's a version that has a reusable SVGLayer class so you can just give it an SVG Path declaration and not worry about all that minutiae

http://share.framerjs.com/4oeje4yxryj0/

Johannes Eckert

this is all great and I just need this at work … I would like to animate clip-path, and according to some great articles (https://css-tricks.com/clipping-masking-css/) this should be possible, see here: http://codepen.io/chriscoyier/pen/d70643d71d123cbf13ad9b1980438526

I tried to do that in Framer, but the transition css-property on the layer doesn't animate this (in fact, it breaks it, changing the clip path only works without the transition property): http://share.framerjs.com/71zvbs4j991c/ (click the box in the corner)

Any idea what's happening?

Mike Feldstein

Something there is not supported in studio, but works in chrome. Im not sure exactly what you're trying to do, but it behaves differently in both places.

Johannes Eckert

dang, you're right. This seems to be a blink/webkit issue then. Chrome's Webkit does do shape animations, but Safari's webkit (used in studio) doesn't — /cc Koen Bok

Mike Feldstein

Try using webkitTransition instead of transition? I find that when doing framer protes prefixing usually gives the best compatibility

Johannes Eckert

Hm, doesn't make a difference. Thing is, if I use transform or -webkit-transform it doesn't even change the clip path. If I remove that CSS, the clippath at least changes instantly

Koen Bok

Clipping is one of those areas where browsers seem to make different tradeoffs for performance, or even because their rendering can't support it easily. A good example is clipping with rounded corners and a 3d transform in Safari. The rounded corners will just be ignored.

Paul Cotton

Thanks Mike, I managed to get that working by playing with your example files. Should be awesome in future :D

Read the entire post on Facebook