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?

http://share.framerjs.com/21s2yghtvtn3/

Thanks!

3 Comments

Chris Wang

http://share.framerjs.com/si4gw20i1qyg/

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

http://share.framerjs.com/tc5k5dn3f50u/
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.
http://framergroup.com/posts/860083807452025.html

Agnes Won

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

Read the entire post on Facebook