How do I make a circular mask grow out from the center of itself instead of the corner?
Can you post a code sample of what you have so far?
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
Yup I'm online all day
Christy Yang set the originX and originY to 0.5 (center) before you scale your circle
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.
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?
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.
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?
Christy Benjamin could you simply scale the superLayer by 2 and the subLayer by .5?
I'm trying that and it doesn't seem to work for some reason
Well, something is happening but the scaling of the sublayer is shifting it oddly
Christy Yang the circle being the animating mask? Something like this? (Mask scales from center)
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)
Thank you I will try this!
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?
force2d works well on circular clipping.
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
Here is the code without the attached image
Benjamin Den Boer
use 150 instead of "50%"
ah nothing changed :(
Hey Christy Yang. Hmm, setting force2d on masked layer should do the trick: https://www.dropbox.com/s/ucbninwkbtuiii8/MaskAnim.mp4?dl=0
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
Thank you Benjamin Den Boer I will try that today :)