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

What is Framer? Join the Community
Return to index
Christy Yang
Posted Sep 17 - Read on Facebook

Hello everyone!

I am trying to figure out what is the best way to make a circle mask that masks a group of assets, not just one...and when you tap it expands to reveal. (like a "secondary screen"). Are there any examples or codes that anyone can refer me to?

16 Comments

Benjamin Den Boer

Hey Christy Yang - I created this one a while back, a circular growing mask that clips imported content. Is this roughly what you're looking for? :) http://share.framerjs.com/fhf2ilv9nz0n/

Christy Yang

Thanks Benjamin Den Boer, I'll try this and attach a few other assets as sublayers to see if it works

Christy Yang

Hi again Benjamin Den Boer, I tried this and for one of the sublayers, (the chat box), on Framer Studio it does not get cut off by the mask properly, but on the browser it seems alright although a bit shaky. Is there something I could do with the code to polish it?

Jordan Robert Dobson

Make sure you do...

MyLayer.force2d = true

On the layer that isn't being clipped.

Christy Yang

Jordan Robert Dobson If I imported the layers from Sketch and they are under a folder, do I have to force2d all the subfolder assets in Framer Studio?

Christy Yang

Jordan Robert Dobson Benjamin Den Boer the force2d just stops working once I mask something from Sketch that is a folder with subfolders / layers...any ideas how to work around this

Jordan Robert Dobson

I would assume only the ones you want to be masked.

Jordan Robert Dobson

well... yeah actually you probably need to do it to any sublayer...

Christy Yang

I did it to all of them and it still gives me a box, ah I'll keep working on it

Christy Yang

Also, just to clarify, what I want is a circle mask to mask a "secondary screen" with other assets besides that map, and when a user taps it reveals the whole map along with the assets. I organized the layers in sketch to have one folder with sub folders of assets

Jordan Robert Dobson

If you want to send me the file directly... I can take a look.

Christy Yang

Let me send you both the sketch.file and the framer file for you to double check...thank you!

Jordan Robert Dobson

Here's the solution I ended up with last night: http://jrdn.io/aqfN

Marc Krenn

Looking at your solution, Jordan, is there any reason why this shouldn't be the standard behavior of force2d (that is, making all subLayers.force2d = true as well)?

Jordan Robert Dobson

It's hard to say really.

Read the entire post on Facebook