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

What is Framer? Join the Community
Return to index
Svet Denkov
Posted Jul 11 - Read on Facebook

Hi All! I am trying to replicate the 1st animation from http://capptivate.co/2014/06/16/elevate-3/ I reproduced the hexagonal mask in Sketch but it is rendering as a rectangle in Framer. Also on resizing the mask renders as image. Any leads on how to handle custom masks in Framer?

22 Comments

Nick Bewley

Svg

Balraj Chana

Hey Svet, you don't need to use masks to create a hexagon in sketch, just go to insert -> polygon -> drag out shape -> double click shape -> select all corners -> set corner radius

Svet Denkov

Nick Bewley can you elaborate pls? Balraj Chana yeah i know how to do this. Where I am getting tripped is creating the hole in the form of a hexagon.

Nick Bewley

Sounds like your are trying to create a hexagonal shape to mask subLayers? If I understand correctly check these two by Mike Feldstein: http://share.framerjs.com/4oeje4yxryj0/ and http://share.framerjs.com/nq652kuhbedn/

Nick Bewley

In other words, make your mask in sketch, export as SVG, then recreate the SVG in your framer file to mask the content

Mike Feldstein

That code can be a little opaque in framer studio, because i added the SVG code in the actual HTML. Using SVG in framer is not the most straightforward thing yet (but to be fair using it anywhere is a chore), but its incredibly powerful.

Basically, get the SVG code into your document somehow, either by pasting it in index.html, or having some javascript code load it and inject it, then you can use it as a mask, and if you're feeling particularly special you can even animate points in it, though at that point you'll probably want to deal with some libraries to handle the SVG for you, like raphael or paperjs.

Mike Feldstein

Note that you need to reference the <clippath> element in the html to use it as a mask, not the full svg tag.

Jordan Robert Dobson

Couldn't you also use -webkit-clip-path?

https://css-tricks.com/clipping-masking-css/

Mike Feldstein

actually yes, just dropping that clipppath SVG String into -webkit-clip-path will probably do the same but much easier...

Mike Feldstein

actually i dunno if you can represent it with -webkit-clip-paths syntax. for simple things definitely use that with the polygon(point,point,point) command, but bezier curves and such i dunno.

Jordan Robert Dobson

Right. I really want to figure this out eventually. You can do circle and ellipse but wasn't clear on a custom one. It seems to be only straight lines at this point from what I found.

Mike Feldstein

It'd make a good module. require('clip-with-svg-path')

Svet Denkov

Thank you all for the useful input/resources. I falsely interpreted that masks out-of-the-box in FJS can be dynamically sized to accomplish the effect in my original post. I guess as of now, masks are more static in nature.

Svet Denkov

Mike Feldstein once I dig more into I will have more to share, but at high level, I am assuming the SVG imported shape from Sketch, is converted to a parent layer containing all of the layers to be shown beneath?

Mike Feldstein

I think the masking is all done at export time, you can verify by looking at the images in the generated framer folder

Svet Denkov

So with this approach I can build a custom SVG mask. I got this step. But can it be animated like you would any other layer? aka Grow the masking hole to reveal what's underneath? I am wondering if I am biting more than I can chew here :)

Jordan Robert Dobson

If you want to send me a few layers I can rough in something for you simply. It will take a bit of thinking on how to best approach it but yes. Sounds possible.

Jordan Robert Dobson

Send me the SVG too if you do pull stuff together.

Nick Bewley

I remember seeing a great one from one of the framer guys with a variety of different animated shape-based svg clipping paths. Will share if I find it

Svet Denkov

Nick Bewley that'd be super helpful! Again, thank you all!

Nick Bewley

Found the one I was thinking of from Benjamin. Uses webkit-clip-path, not svg. Good ideas there though: http://share.framerjs.com/0qw309wo2yb9/

Tomas Ruzicka

haha, Jan Vu Nam

Read the entire post on Facebook