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

What is Framer? Join the Community
Return to index
Matt Wujek
Posted Dec 24 - Read on Facebook

I'm using the scale function in a larger project for zooming in and out of a map. I've isolated the components to illustrate my problem. I need to access the scaled properties such as X-value, Y-value, width, height, etc.

Unfortunately, I can't just change the width and height because they don't play well with originX/originY. I want to use scale because I can change the origin point of the map before zooming.

Any ideas for capturing newly scaled properties?



Chad Lonberger

Can't you just compute the new values you're interested in against the scale delta? Ex: newWidth = scaleLayer.width * (scaleValue/1)

Benjamin Den Boer

Hey Matt Wujek, if you immediately increment the scaleValue within your Event handlers, you can use them within your print declaration to calculate the new width and minX values.

Matt Wujek

I think I oversimplified my problem. The real issue is that I am changing the origin point each time the scaleLayer is zoomed in/out; therefore, it's nearly impossible to access the x and y values.

I've added another video that should illustrate my problem more explicitly. I'm having the most trouble access the x and y values after a change in the scale. You'll notice that the scaling problem is more noticeable away from (0,0).

Each time the layer is scaled, a red dot is placed at the origin point. The red dot should always be placed in the middle. Because I cannot determine the x and y values, the origin (red dot) is all over place.

I've posted the example here:

Benjamin Den Boer

Hey Matt Wujek, could you attach the .framer file as well?

Matt Wujek
Benjamin Den Boer

Hey Matt Wujek, thanks. Do you want the red dot to represent the center of the map at all times, despite the change in originX and originY or do you want the red dot to represent the actual originX and originY of the scaling map?

Few things I'm seeing in your code:
- You define the scaleOriginX and scaleOriginY variables twice, and use them at different places in the code which means they'll have different results. The scaleOriginX you use for the scaleOriginXfull variable has a different output then the one you use for the animations and in defining the originPoint.

- The first definition of scaleOriginX (and Y) uses the map.x and the displayMidX, but since the x and y of the map never actually change, this will always be negative (0 - midX).

Benjamin Den Boer

Is this what you're looking for? (Dots represent the change of the originX and originY of the map whenever it transforms)

Matt Wujek

Benjamin, thanks for working on this! I would like the dots to represent the change of the originX and originY of the map. I think you nailed it with your last post! Would you mind sending that back to me?

Read the entire post on Facebook