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

What is Framer? Join the Community
Return to index
Agnes Won
Posted Aug 22 - Read on Facebook

Hi! I'm working on my first Framer project which involves circular masks around an image. I was able to achieve the circular mask with some help from the threads here using webkitClipPath. I have the circularmask scale based on user click, and what I ultimately want to achieve is scaling the image within the mask (and moving the x y positions of the image) as the mask scales.

I've tried changing the image attributes, but it doesn't seem like I can access the image attributes with the webkitClipPath I set up.

Any experts here have tips on how to proceed?



Chris Wang

Not sure if this is what you are trying to do.

Since you want circular mask, you could just use border-radius for that. Creating a separate mask layer will give you more control over the mask and the image.

Chris Wang
Here 's another one using ClipPath. I still haven't figured out how to use image as masks yet.

Shout out to Benjamin Den Boer for his help with this a while ago.

Agnes Won

Chris Wang This is immensely helpful! I'll start playing around with it & report back.

Read the entire post on Facebook