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

What is Framer? Join the Community
Return to index
Jeff Chang
Posted Feb 10 - Read on Facebook

Hi Everyone!
I have a question on how to make something like an inverted mask? Basically, I have a layer that's 30% black, and I want to cut a circle in it, and have that circle be animated. Has anyone done something similar?

9 Comments

Callil Capuozzo

Maybe you can actually use two layers with the same image. The background layer is the image with a grey overlay. The then you basically move the mask.y location over another layer with the same image and no fade.

Jeff Chang

Thanks for the suggestion Callil. A problem happens when I make the image a sublayer of the mask and move the mask, the image moves along with it, when it should be static... I'll keep trying to figure this out!

George Kedenburg III

I would make a giant PNG with the hole cut out and just move/scale that around.

Tanner Christensen

Jeremy Isn't this exactly what you just worked on?

Jeremy Friedland

Tanner, yes but in QC. Not sure how it would translate to framer.

George Kedenburg III

quick and dirty proof of concept of the "giant PNG with hole" method: http://share.framerjs.com/g3xblw8dhcon/

Peter Hilgersom

Nice thinking George (Y) I don't see why this 'quick and dirty' way is worse than any other really!

Jeff Chang

Haha nice, thanks George!! I may have to make a GIANT png if I'm gonna scale this, but for now, this should work, thanks!

George Kedenburg III

It may be easier to make a couple of PNGs instead of trying to reuse the same one over and over :)

Read the entire post on Facebook