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

What is Framer? Join the Community
Return to index
Noah Levin
Posted Feb 12 - Read on Facebook

Anyone have any examples using a circular mask? It keeps getting clipped to the rectangular frame bounds. I've tried hacking it with border radius, but it still gets clipped to a rectangle. Is this possible? I'm probably missing something obvious..

8 Comments

Koen Bok

Yeah this is due to how the graphics rendering pipeline works. The tldr is that you cannot get hardware accelerated masks when using border-radius.

I added a thing called _prefer2d to layers so you can force software rendering to make it work: http://cl.ly/133s3Q172T2r

Jay Wong

erm, I did something here that worked, but I kinda hacked it together

Jay Wong

this was to get a circular video feed to work a while ago

Noah Levin

Koen Bok that works! though now, how would you scale the mask, but not the image inside? something using screenframe maybe?

Jay Wong -- I may end up needing to use CSS as you have if this doesn't work, but I was hoping to use pure framer to not risk possible performance side effects. And also because I'll need to be able to manipulate / animate it's properties.

Chad Lonberger

Koen Bok is the above (masking w/ -webkit-mask) hardware accelerated w/ the GPU? Thanks

Koen Bok

My guess would be no. But I couldn't quickly verify with some googling. Anecdotally, we haven't really ran into performance issues when we used it.

Read the entire post on Facebook