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

What is Framer? Join the Community
Return to index
Adam Mazurick
Posted Aug 29 - Read on Facebook

I have a question. I'm studying framer.js and the interface and continuing to learn and discover. I’m following Sean Mateer’s kick-ass tutorial here.

As per the tutorial’s instructions, I’ve created a state named ‘stateA’ to change the x and y coordinates of file named $.card1 to the following coordinates upon click …

stateA: x: -510, y: 300, scale: 0.85, originX: 1, originY: 0

so far so good…yay…all is well…until…

I go into the framer property panel and after the event has occurred the property panel indicates stateA's position to be x: -424 y: 300…

Why is that?

I attached a photo.


Chris Wang

So when you scale a layer, it doesn't change its x,y position. so in the example below, when I print the x, y position, they stay the same after scaling.

However, the layer inspector in Framer returns the actual visible x,y position of the layer. So that's the visible x,y position after the scaling.

Not sure if there's a way to get the width, height, x, y of a layer after scaling with code, but that would be useful in my opinion.

Chris Wang

This also applies to width and height when scaling.

Chris Wang

This was confusing to me at first. But then I looked it in an animation context it made sense to me.

I think of Width, Height, initial x, y etc. as modeling process. When you model this object, you need to set those properties, and you probably don't wanna change(animate) those properties after you finish modeling.

And then when you need to animate the object, you add in animators like transformation to scale, translate, rotate or what not. This way is non-destructive as you animate because you are not changing the original object.

Imagine you are adding squash and stretch to an object and then you need it to restore to its original shape in 2D, it's way easier to use scaling than using width and height because you can just set scale to 1 at the end rather than keeping track of the actual width and height of the object.

Koen Bok

This is a really good explanation. The extra power of scale + width/height trumps the extra complexity after a bit. To make it "simple" you would have to leave one out, making a subset of things hard again (like scale + origin).

One last reason they are so explicitly different is that computers can really optimize them. Scaling objects is way faster then width/height because your device can leave it to the cpu.

Read the entire post on Facebook