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

What is Framer? Join the Community
Return to index
Benjamin Den Boer
Posted Mar 24 - Read on Facebook

Hey guys! Here's a little demo of how to use clipPaths to mask images in Framer. Thanks to Kristoffer Lundberg for the heads-up. :-)

Check out Clippy as well, to easily create a bunch of different shapes: (triangles, hexagons...) http://bennettfeely.com/clippy/

Demo: http://share.framerjs.com/0qw309wo2yb9/

13 Comments

Johannes Eckert

You are rotating the whole object, right? Did you find a way to animate the clip path itself, such as to mask and unmask a layer like in material design?

Benjamin Den Boer

Ooh good idea Johannes Eckert - I did indeed rotate the layers entirely. But with the magic of Modulate you can:
http://share.framerjs.com/8bh830qkg19h/ :)

Johannes Eckert

Benjamin holy! I will have to try that out as soon as I get to work

Johannes Eckert

Thank you for sharing the last example with animated clipping paths — super helpful! I tried to achieve this with CSS animations a couple of days ago (https://www.facebook.com/groups/framerjs/permalink/652903048170103/) and hit a browser support problem, but your example is different:
You are not _animating_ the path, you are actually changing it at every redraw. This is clever (don't know about performance, yet)!

What would be a good solution (or workaround) to get the path "animating" on it's own (e.g. after click) and not depending on the change of another event?

Using "change:rotationZ" is super interesting and I saw it popping up a couple of times here on facebook. I still cannot find it in the documentation, but I guess it's fully supported now?

Matt Wujek

Killin' it guys. Keep it up!

Johannes Eckert

OK wow — instead of using a custom function to draw this, I like the .on "change:x" event. This allows me to use easings on the change but also the state machine to change the direction mid-transition:

http://share.framerjs.com/sdi6ib57zoe3/

this uses the red little box as a helper layer to animate between x between 0 and 100 and use that as the timeline for the clipPath change.

do you think that's clean enough to use? I have sweet performance during test

Johannes Eckert

I'm hijacking this thread ,-)

here's what I found: I need to clip a layer with children, but this has different results in Safari and Chrome — Chrome will clip all children, while Safari has them sticking out.

http://share.framerjs.com/8q89lpo5w2qs/

but this seems to a problem with Framer Layers. This codepen looks right in Safari: http://codepen.io/frischmilch/pen/MYLwzg

I tried to set _prefer2D on both layers, but with no difference.
I can use this and preview in Chrome, but any hint what would make this work in safari on iOS and mac?

Benjamin Den Boer

Hey Johannes - have you tried layer.force2d = true instead of _prefer2D? :)

Jordan Robert Dobson

^ Benjamin you beat me to it. ;)

Johannes Eckert

that's it! Thank you guys!
http://share.framerjs.com/8j36fhde0y6w/

Johannes Eckert

This is very sweet: I am using this on a whole layer with children to start some view transition. I had to use two different magic layers (that's how I call these little helpers) to get around some logical/visual issues with the circle revealing too much when the image was still transitioning:

http://share.framerjs.com/ghj6b8wto5ok/

thank you for your help — this is an awesome trick and it works wonders!

Shane Brown

Johannes, awesome!

Slghtr Khari

interesting!

Read the entire post on Facebook