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..


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:

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