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

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

How do I make a circular mask grow out from the center of itself instead of the corner?

24 Comments

Arron J Hunt

Can you post a code sample of what you have so far?

Christy Yang

Ah yes are you active on this page during work hours? I will get back to you as soon as I get to my work computer tomorrow morning

Arron J Hunt

Yup I'm online all day

Alexis Morin

Christy Yang set the originX and originY to 0.5 (center) before you scale your circle

Benjamin Den Boer

Christy Yang are you using scale or width/height to grow the layer? The transform origin when scaling layers is set to center by default.

Christy Yang

Alexis Morin & Benjamin Den Boer, when I set it to scale instead of width and height, it scales the sublayers underneath too which I don't want. I want the mask to grow and reveal...with everything under it unaltered...maybe it is how I'm writing my code?

Benjamin Den Boer

Christy Yang Ah, okay. Then you'll want to animate the width and height. Since subLayers inherit properties of their superLayers, you'll want to make sure masked layers are positioned accordingly.

Example: A centered layer within a centered mask. We want to scale the mask by 2, from 100x100 to 200x200. To center the mask, we can simply offset the x and y values within the animation for it to stay in place.

Now, the masked subLayer is positioned relative to its superLayer. If you want the subLayers position to be unaffected by the mask animation, you'll need to offset its x & y positions accordingly.

If you do so, both the masked subLayer and the mask will stay centered, while the mask is effectively scaled 2x.

Christy Yang

Thanks! is there a simple mathematical way to make the circle stay in the center of wherever it is positioned (off-centered) or is it a trial and error type thing?

Arron J Hunt

Christy Benjamin could you simply scale the superLayer by 2 and the subLayer by .5?

Christy Yang

I'm trying that and it doesn't seem to work for some reason

Christy Yang

Well, something is happening but the scaling of the sublayer is shifting it oddly

Benjamin Den Boer

Christy Yang the circle being the animating mask? Something like this? (Mask scales from center)

Benjamin Den Boer

Experimented a bit with making this easily adjustable. You may not need this, but if you wanted both the width & height of the mask and the scale factor to be variable, you could. :)

(The mask and its contents stay centered, regardless of the scale factor)

Christy Yang

Thank you I will try this!

Christy Yang

Hi again,

About circular masks again...everything works well as far as animations, I've got the circle and the masked object underneath to stay in place while it grows. The problem now is...when I translate this from a simple example to my prototype, the circular mask won't clip circularly. It gives me a box instead. I have no idea what's going on and I tried doing force2d. What can I do?

Seoh Char

force2d works well on circular clipping.

Christy Yang

Seoh Char, yes, I tried that and it didn't work. I unfortunately can't snapshot the exact prototype I'm working on, but I have called all the layers into the circle as sublayers, then used force2d also. It still shows a box

Christy Yang

Here is the code without the attached image

Christy Yang

Benjamin Den Boer

Seoh Char

use 150 instead of "50%"

Christy Yang

ah nothing changed :(

Benjamin Den Boer

Hey Christy Yang. Hmm, setting force2d on masked layer should do the trick: https://www.dropbox.com/s/ucbninwkbtuiii8/MaskAnim.mp4?dl=0

Benjamin Den Boer

Also working on Imported layers here. One other thing you could try is going to File -> Update Framer. Perhaps your prototype is still running an older version. https://www.dropbox.com/s/apz238rdudeczyk/MaskAnim2.mp4?dl=0

Christy Yang

Thank you Benjamin Den Boer I will try that today :)

Read the entire post on Facebook