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

What is Framer? Join the Community
Return to index
Chris Wang
Posted Sep 03 - Read on Facebook

Hey guys, I got a question regarding originX, originY. Is it possible to set originX and Y for animating width or height?

16 Comments

Jordan Robert Dobson

Only really if you are using scale.

Chris Wang

Thanks Jordan! I was trying to do something like this, ScaleX doesn't really work.

Rory Smyth

Nope. But if you change the x position and adjust the width it'll have the same effect.

Chris Wang

Rory, thanks for the tip! It works.

Mike Feldstein

Something like this: http://share.framerjs.com/rnbez05ksybk/
ScaleX will literally just stretch your whole view, but changing the width with a constant cornerRadius is what you want to do

Chris Wang

Nice example Mike, seems like I will have to adjust the x position while animating width.

BTW, is cornerRadius the same as borderRadius? Didn't see that in the docs.

Mike Feldstein

probably, they probably added cornerRadius to map to borderRadius to make ios developers at home

Koen Bok

Yeah we aliased it because it's a common mistake.

Mike Feldstein

I love how framer just patches common mistakes instead of telling people they're doing it wrong.

Chris Wang

Koen nice job on making Framer inclusive!

Chris Wang

Love this line of code, Mike.
width: if opened then 500 else 160

It's always delightful to see something like this as a new learner of coffeescript. Didn't know I could use conditions in a property!

Koen Bok

To be honest, we do that too sometimes ;-) but it helps when you use your own stuff and run into these annoyances.

Chris Wang

Koen, is it possible to make origins work for width and height as well? Or maybe there's a good reason not to do so?

Jordan Robert Dobson

OriginX/Y relates to the transform (scale, rotate, etc) properties one of which is not width and height. Width and height are just normal non graphics accelerated properties and the origin will always be left top or 0 / 0.

I so wish we had a way to do constraint based layouts like in iOS. That would make this easy.

To keep it centered do something like this:

myLayer = new Layer width:100, height: 50, x:300

add = 200

myLayer.states.add
wide:
width: myLayer.width + add
x: myLayer.x - (add / 2)

myLayer.states.switch "wide"

Koen Bok

Yes what Jordan says, but I did think about adding calculation methods to set the origin/scale in real pixels.

Jordan Robert Dobson

I would be down with something like that.

.widthByMidX .widthByMaxX

.widthFromCenter

.widthFromOrigin (specify width and origin here)

Read the entire post on Facebook