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/
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?
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/ :)
Benjamin holy! I will have to try that out as soon as I get to work
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?
Killin' it guys. Keep it up!
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:
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
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.
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?
Hey Johannes - have you tried layer.force2d = true instead of _prefer2D? :)
^ Benjamin you beat me to it. ;)
that's it! Thank you guys!http://share.framerjs.com/8j36fhde0y6w/
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:
thank you for your help — this is an awesome trick and it works wonders!